@duxweb/dvha-pro 1.0.24 → 1.0.25

package/dist/types/components/image/elements/circle.d.ts

@@ -0,0 +1,3 @@
+import type { ElementConfig } from './types';
+declare const circleElement: ElementConfig;
+export default circleElement;

package/dist/types/components/image/elements/image.d.ts

@@ -0,0 +1,3 @@
+import type { ElementConfig } from './types';
+declare const imageElement: ElementConfig;
+export default imageElement;

package/dist/types/components/image/elements/index.d.ts

@@ -0,0 +1,15 @@
+import type { ElementConfig } from './types';
+declare class ElementRegistry {
+    private elements;
+    register(config: ElementConfig): void;
+    registerAll(configs: ElementConfig[]): void;
+    get(type: string): ElementConfig | null;
+    getAll(): ElementConfig[];
+    getByCategory(category: string): ElementConfig[];
+    getCategories(): string[];
+}
+export declare const elementRegistry: ElementRegistry;
+export declare const elementConfigs: ElementConfig[];
+export declare const getElementConfig: (type: string) => ElementConfig | null;
+export declare const getElementsByCategory: (category: string) => ElementConfig[];
+export * from './types';

package/dist/types/components/image/elements/rect.d.ts

@@ -0,0 +1,3 @@
+import type { ElementConfig } from './types';
+declare const rectElement: ElementConfig;
+export default rectElement;

package/dist/types/components/image/elements/text.d.ts

@@ -0,0 +1,3 @@
+import type { ElementConfig } from './types';
+declare const textElement: ElementConfig;
+export default textElement;

package/dist/types/components/image/elements/types.d.ts

@@ -0,0 +1,51 @@
+import type { FabricObject } from 'fabric';
+export interface BaseElementProps {
+    id: string;
+    type: string;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    angle: number;
+    scaleX: number;
+    scaleY: number;
+    visible: boolean;
+    locked: boolean;
+}
+export type ToolbarControlType = 'number' | 'text' | 'color' | 'select' | 'switch' | 'slider' | 'image';
+export interface ToolbarControl {
+    key: string;
+    label: string;
+    type: ToolbarControlType;
+    value: any;
+    options?: {
+        min?: number;
+        max?: number;
+        step?: number;
+        choices?: Array<{
+            label: string;
+            value: any;
+        }>;
+        placeholder?: string;
+    };
+}
+export interface ElementConfig {
+    type: string;
+    name: string;
+    icon: string;
+    category: string;
+    defaultProps: Record<string, any>;
+    createFabricObject: (props: Record<string, any>) => FabricObject;
+    getPropsFromFabricObject: (obj: FabricObject) => Record<string, any>;
+    getToolbarControls: (props: Record<string, any>) => ToolbarControl[];
+    onPropsChange?: (props: Record<string, any>, fabricObject: FabricObject) => void;
+}
+export type AlignType = 'left' | 'right' | 'top' | 'bottom' | 'center-horizontal' | 'center-vertical' | 'center-both' | 'distribute-horizontal' | 'distribute-vertical' | 'move-up' | 'move-down' | 'move-to-front' | 'move-to-back';
+export type ElementData = BaseElementProps & Record<string, any>;
+export interface CanvasData {
+    width: number;
+    height: number;
+    backgroundColor: string;
+    backgroundImage?: string;
+    elements: ElementData[];
+}

package/dist/types/components/image/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './usePosterEditor';

package/dist/types/components/image/hooks/usePosterEditor.d.ts

@@ -0,0 +1,48 @@
+import type { FabricObject } from 'fabric';
+import type { ComputedRef, Ref } from 'vue';
+import type { AlignType, CanvasData, ElementConfig, ElementData } from '../elements/types';
+interface PosterEditorOptions {
+    width?: number;
+    height?: number;
+    backgroundColor?: string;
+    backgroundImage?: string;
+}
+export interface PosterEditorReturn {
+    initCanvas: (element: HTMLCanvasElement, container?: HTMLElement) => void;
+    destroy: () => void;
+    setCallbacks: (callbacks: {
+        onDataChange?: (data?: string) => void;
+    }) => void;
+    addElement: (type: string, customProps?: Record<string, any>) => Promise<string | undefined>;
+    deleteSelectedElements: () => void;
+    updateElementProperty: (elementId: string, key: string, value: any) => void;
+    alignElements: (alignType: AlignType) => void;
+    canMoveUp: ComputedRef<boolean>;
+    canMoveDown: ComputedRef<boolean>;
+    canMoveToFront: ComputedRef<boolean>;
+    canMoveToBack: ComputedRef<boolean>;
+    clearCanvas: () => void;
+    loadData: (data?: string) => void;
+    updateData: () => void;
+    canvas: Ref<any>;
+    canvasData: Ref<CanvasData>;
+    selectedElements: Ref<FabricObject[]>;
+    canvasScale: Ref<number>;
+    currentElement: ComputedRef<FabricObject | null>;
+    currentElementData: ComputedRef<ElementData | null>;
+    currentElementConfig: ComputedRef<ElementConfig | null>;
+    hasMultipleSelection: ComputedRef<boolean>;
+    clearSelection: () => void;
+    updateCanvasSize: () => void;
+    setupAutoResize: (container: HTMLElement) => () => void;
+    getSelectedElementProperty: (key: string) => any;
+    selectedElementsData: ComputedRef<ElementData[]>;
+    syncAllFabricObjectsToData: () => void;
+    updateCanvasSettings: (width: number, height: number) => void;
+    updateCanvasBackground: (color: string) => void;
+    updateCanvasBackgroundImage: (imageUrl: string) => void;
+    saveData: () => void;
+    exportJson: () => void;
+}
+export declare function usePosterEditor(options?: PosterEditorOptions): PosterEditorReturn;
+export {};

package/dist/types/components/image/index.d.ts

@@ -0,0 +1,4 @@
+export * from './elements';
+export * from './hooks';
+export * from './posterEditor';
+export * from './types/editor';

package/dist/types/components/image/pages/LeftToolbar.d.ts

@@ -0,0 +1,33 @@
+import type { PropType } from 'vue';
+export interface LeftToolbarProps {
+    onAddElement: (type: string) => void;
+    canvasWidth: number;
+    canvasHeight: number;
+}
+export declare const LeftToolbar: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    onAddElement: {
+        type: PropType<(type: string) => void>;
+        required: true;
+    };
+    canvasWidth: {
+        type: NumberConstructor;
+        required: true;
+    };
+    canvasHeight: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    onAddElement: {
+        type: PropType<(type: string) => void>;
+        required: true;
+    };
+    canvasWidth: {
+        type: NumberConstructor;
+        required: true;
+    };
+    canvasHeight: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/types/components/image/pages/Panel.d.ts

@@ -0,0 +1,11 @@
+export declare const Panel: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/types/components/image/pages/PanelItem.d.ts

@@ -0,0 +1,11 @@
+export declare const PanelItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/types/components/image/pages/RightPanel.d.ts

@@ -0,0 +1,208 @@
+import type { PropType } from 'vue';
+import type { ElementData, ToolbarControl } from '../elements/types';
+export interface RightPanelProps {
+    hasMultipleSelection: boolean;
+    selectedElementsCount: number;
+    currentElementData?: ElementData;
+    currentElementConfig?: any;
+    canMoveUp: boolean;
+    canMoveDown: boolean;
+    canMoveToFront: boolean;
+    canMoveToBack: boolean;
+    canvasWidth: number;
+    canvasHeight: number;
+    canvasBackgroundColor: string;
+    canvasBackgroundImage?: string;
+    onDeleteSelectedElements: () => void;
+    onAlignElements: (type: string) => void;
+    onUpdateElementProperty: (id: string, key: string, value: any) => void;
+    onUpdateCanvasSize: (width: number, height: number) => void;
+    onUpdateCanvasBackground: (color: string) => void;
+    onUpdateCanvasBackgroundImage: (imageUrl: string) => void;
+    onSaveData: () => void;
+    onExportJson: () => void;
+    onRenderToolbarControl: (control: ToolbarControl) => any;
+    onClearCanvas: () => void;
+    canvasScale: number;
+}
+export declare const RightPanel: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    hasMultipleSelection: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    selectedElementsCount: {
+        type: NumberConstructor;
+        required: true;
+    };
+    currentElementData: {
+        type: PropType<ElementData>;
+    };
+    currentElementConfig: {
+        type: ObjectConstructor;
+    };
+    canMoveUp: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    canMoveDown: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    canMoveToFront: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    canMoveToBack: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    canvasWidth: {
+        type: NumberConstructor;
+        required: true;
+    };
+    canvasHeight: {
+        type: NumberConstructor;
+        required: true;
+    };
+    canvasBackgroundColor: {
+        type: StringConstructor;
+        required: true;
+    };
+    canvasBackgroundImage: {
+        type: StringConstructor;
+    };
+    onDeleteSelectedElements: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onAlignElements: {
+        type: PropType<(type: string) => void>;
+        required: true;
+    };
+    onUpdateElementProperty: {
+        type: PropType<(id: string, key: string, value: any) => void>;
+        required: true;
+    };
+    onUpdateCanvasSize: {
+        type: PropType<(width: number, height: number) => void>;
+        required: true;
+    };
+    onUpdateCanvasBackground: {
+        type: PropType<(color: string) => void>;
+        required: true;
+    };
+    onUpdateCanvasBackgroundImage: {
+        type: PropType<(imageUrl: string) => void>;
+        required: true;
+    };
+    onSaveData: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onExportJson: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onRenderToolbarControl: {
+        type: PropType<(control: ToolbarControl) => any>;
+        required: true;
+    };
+    onClearCanvas: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    canvasScale: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    hasMultipleSelection: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    selectedElementsCount: {
+        type: NumberConstructor;
+        required: true;
+    };
+    currentElementData: {
+        type: PropType<ElementData>;
+    };
+    currentElementConfig: {
+        type: ObjectConstructor;
+    };
+    canMoveUp: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    canMoveDown: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    canMoveToFront: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    canMoveToBack: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    canvasWidth: {
+        type: NumberConstructor;
+        required: true;
+    };
+    canvasHeight: {
+        type: NumberConstructor;
+        required: true;
+    };
+    canvasBackgroundColor: {
+        type: StringConstructor;
+        required: true;
+    };
+    canvasBackgroundImage: {
+        type: StringConstructor;
+    };
+    onDeleteSelectedElements: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onAlignElements: {
+        type: PropType<(type: string) => void>;
+        required: true;
+    };
+    onUpdateElementProperty: {
+        type: PropType<(id: string, key: string, value: any) => void>;
+        required: true;
+    };
+    onUpdateCanvasSize: {
+        type: PropType<(width: number, height: number) => void>;
+        required: true;
+    };
+    onUpdateCanvasBackground: {
+        type: PropType<(color: string) => void>;
+        required: true;
+    };
+    onUpdateCanvasBackgroundImage: {
+        type: PropType<(imageUrl: string) => void>;
+        required: true;
+    };
+    onSaveData: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onExportJson: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onRenderToolbarControl: {
+        type: PropType<(control: ToolbarControl) => any>;
+        required: true;
+    };
+    onClearCanvas: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    canvasScale: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/types/components/image/pages/index.d.ts

@@ -0,0 +1,4 @@
+export { LeftToolbar } from './LeftToolbar';
+export type { LeftToolbarProps } from './LeftToolbar';
+export { RightPanel } from './RightPanel';
+export type { RightPanelProps } from './RightPanel';

package/dist/types/components/image/posterEditor.d.ts

@@ -0,0 +1,61 @@
+import type { PropType } from 'vue';
+export interface PosterEditorProps {
+    data?: string;
+    width?: number;
+    height?: number;
+    backgroundColor?: string;
+    backgroundImage?: string;
+}
+export declare const DuxPosterEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<string>;
+        default: string;
+    };
+    width: {
+        type: PropType<number>;
+        default: number;
+    };
+    height: {
+        type: PropType<number>;
+        default: number;
+    };
+    backgroundColor: {
+        type: PropType<string>;
+        default: string;
+    };
+    backgroundImage: {
+        type: PropType<string>;
+        default: string;
+    };
+    onDataUpdate: PropType<(data?: string) => void>;
+    onSave: PropType<(data?: string) => void>;
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<string>;
+        default: string;
+    };
+    width: {
+        type: PropType<number>;
+        default: number;
+    };
+    height: {
+        type: PropType<number>;
+        default: number;
+    };
+    backgroundColor: {
+        type: PropType<string>;
+        default: string;
+    };
+    backgroundImage: {
+        type: PropType<string>;
+        default: string;
+    };
+    onDataUpdate: PropType<(data?: string) => void>;
+    onSave: PropType<(data?: string) => void>;
+}>> & Readonly<{}>, {
+    data: string;
+    height: number;
+    width: number;
+    backgroundColor: string;
+    backgroundImage: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/types/components/image/types/editor.d.ts

@@ -0,0 +1,47 @@
+import type { Canvas, FabricObject } from 'fabric';
+export interface PropertyControl {
+    key: string;
+    label: string;
+    type: 'input' | 'number' | 'color' | 'select' | 'button' | 'textarea' | 'slider';
+    value: any;
+    min?: number;
+    max?: number;
+    options?: Array<{
+        label: string;
+        value: any;
+    }>;
+    action?: () => void;
+    disabled?: boolean;
+}
+export interface ElementPlugin {
+    id: string;
+    name: string;
+    icon: string;
+    category: string;
+    elementTypes: string[];
+    create: (options?: any) => {
+        type: string;
+        config: any;
+    };
+    getToolbarControls: (object: FabricObject, context: {
+        updateProperty: (key: string, value: any) => void;
+        canvas: Canvas | null;
+    }) => PropertyControl[];
+}
+export interface CanvasSettings {
+    width: number;
+    height: number;
+    backgroundColor: string;
+    backgroundImage: string | null;
+}
+export interface FabricElement {
+    id: string;
+    type: string;
+    config: any;
+    elementType?: string;
+}
+export interface AlignmentControl {
+    key: string;
+    label: string;
+    action: () => void;
+}

package/dist/types/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './card';
 export * from './carousel';
 export * from './chart';
+export * from './code';
 export * from './crop';
 export * from './dashboard';
 export * from './data';
@@ -10,6 +11,7 @@ export * from './drawer';
 export * from './editor';
 export * from './form';
 export * from './icon';
+export * from './image';
 export * from './layout';
 export * from './level';
 export * from './list';
@@ -22,6 +24,4 @@ export * from './status';
 export * from './table';
 export * from './tree';
 export * from './upload';
-export * from './upload';
 export * from './widget';
-export * from './code';

package/dist/types/components/stats/number.d.ts

@@ -46,5 +46,5 @@ export declare const DuxStatsNumber: import("vue").DefineComponent<import("vue")
     value: string | number;
     change: number;
     subtitle: string;
-    changeType: "up" | "down";
+    changeType: "down" | "up";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/types/components/upload/file.d.ts

@@ -1,13 +1,15 @@
 import type { IDataProviderResponse, IS3SignData } from '@duxweb/dvha-core';
 import type { IUploadParams } from './manager';
+type IUploadValue = Record<string, any>[] | Record<string, any>;
 export interface IUploadProps extends IUploadParams {
     driver?: 'local' | 's3';
     signPath?: string;
     signCallback?: (response: IDataProviderResponse) => IS3SignData;
     managePath?: string;
-    value?: string | string[];
-    defaultValue?: string | string[];
-    onUpdateValue?: (value?: string | string[]) => void;
+    value?: IUploadValue;
+    defaultValue?: IUploadValue;
+    onUpdateValue?: (value?: IUploadValue) => void;
     manager?: boolean;
 }
 export declare const DuxFileUpload: import("vue").DefineComponent<IUploadProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IUploadProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export {};

package/dist/types/index.d.ts

@@ -8,3 +8,4 @@ export * from './main';
 export * from './pages';
 export * from './stores';
 export * from './theme';
+export { default as VueKonva } from 'vue-konva';

package/dist/types/pages/layout/global.d.ts

@@ -1,2 +1 @@
-import 'echarts';
 export declare const DuxGlobalLayout: import("vue").DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@duxweb/dvha-pro",
   "type": "module",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "author": "DuxWeb",
   "license": "MIT",
   "repository": {
@@ -33,8 +33,8 @@
   ],
   "dependencies": {
     "@ant-design/colors": "^7.2.1",
-    "@duxweb/dvha-core": "^1.0.24",
-    "@duxweb/dvha-naiveui": "^1.0.24",
+    "@duxweb/dvha-core": "^1.0.25",
+    "@duxweb/dvha-naiveui": "^1.0.25",
     "@iconify-json/tabler": "^1.2.18",
     "@overlastic/vue": "^0.8.1",
     "@tanstack/vue-query": "^5.80.7",
@@ -51,8 +51,10 @@
     "colorizr": "^3.0.8",
     "dayjs": "^1.11.13",
     "echarts": "^5.6.0",
+    "fabric": "^6.7.0",
     "jinrishici": "^1.0.6",
     "jsep": "^1.4.0",
+    "konva": "^9.3.20",
     "lodash-es": "^4.17.21",
     "mathjs": "^14.5.2",
     "mime": "^4.0.7",
@@ -66,6 +68,7 @@
     "vue-cropper": "^1.1.4",
     "vue-draggable-plus": "^0.6.0",
     "vue-echarts": "^7.0.3",
+    "vue-konva": "^3.2.1",
     "vue-router": "^4.5.1",
     "vue3-ace-editor": "^2.2.4"
   },