@sec-fe/v-grid-layout 0.0.2

package/lib/index.d.ts

@@ -0,0 +1,433 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { ComputedRef } from 'vue';
+import { DefineComponent } from 'vue';
+import { Plugin as Plugin_2 } from 'vue';
+import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    save: (...args: any[]) => void;
+    "go-back": (...args: any[]) => void;
+    init: (...args: any[]) => void;
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSave?: ((...args: any[]) => any) | undefined;
+    "onGo-back"?: ((...args: any[]) => any) | undefined;
+    onInit?: ((...args: any[]) => any) | undefined;
+}>, {
+    data: string;
+    showTab: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_2: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    mounted: (...args: any[]) => void;
+}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{
+    onMounted?: ((...args: any[]) => any) | undefined;
+}>, {
+    data: string;
+    themeType: "fullPage" | "dashboard";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare type __VLS_Props = {
+    data?: string;
+    showTab?: boolean;
+};
+
+declare type __VLS_Props_2 = {
+    data?: string;
+    themeType?: 'fullPage' | 'dashboard';
+};
+
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        left?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_2(): {
+    attrs: Partial<{}>;
+    slots: Readonly<Record<string, any>> & Record<string, any>;
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+
+declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_2<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+/**
+ * 获取拖拽放置时的网格索引
+ * @param event - 拖拽事件对象
+ * @returns 网格项索引，如果未找到则返回 0
+ */
+export declare function getDropGridIndex(event: DragEvent): number;
+
+export declare interface IBackground {
+    backgroundType?: 'none' | 'color' | 'image';
+    backgroundColor?: string;
+    backgroundImage?: string;
+}
+
+export declare interface IBorder extends IFrameOptions {
+    borderStyle?: 'dashed' | 'solid' | 'dotted';
+    borderWidth?: number;
+    borderColor?: string;
+}
+
+export declare interface IBoxShadow {
+    type: 'none' | 'inset' | 'outset';
+    offsetX: number;
+    offsetY: number;
+    blur: number;
+    spread: number;
+    color: string;
+}
+
+export declare interface ICell {
+    id: number;
+    area: number[];
+    mergedCellIds: number[];
+    themes: Record<string, Partial<ICellThemeStyle>>;
+    data: Record<string, any>;
+    [key: string]: any;
+}
+
+/**
+ * 单元格数据接口
+ */
+export declare interface ICellData {
+    /** 报表ID */
+    reportId?: string | number;
+    /** 时间间隔 */
+    timeInterval: string | number;
+    /** 刷新频率 */
+    refreshFrequency: string | number;
+}
+
+export declare interface ICellThemeStyle {
+    frame: IBorder;
+    title: IFont & IPandding & Record<string, any>;
+    subtitle: IFont & IPandding & Record<string, any>;
+    shadow: IBoxShadow;
+    padding: IPandding;
+    boxContent: IPandding;
+}
+
+/**
+ * 单元格标题样式类型
+ */
+export declare type ICellTitleStyle = IPandding & IFont & {
+    /** 是否显示图标 */
+    showIcon?: boolean;
+};
+
+export declare interface IFont {
+    fontSize: number;
+    fontWeight: number;
+    fontStyle: string;
+    fontFamily: string;
+    lineHeight: number;
+    color: string;
+    justifyContent: 'flex-start' | 'center' | 'flex-end';
+    alignItems: 'flex-start' | 'center' | 'flex-end';
+}
+
+export declare interface IFrameOptions {
+    borderRadius?: number;
+    borderType?: 'none' | 'line' | 'component';
+    backgroundColor?: string;
+    fillColor?: string;
+    reverse?: boolean;
+    dur?: number;
+    colors?: string[];
+    componentName?: string;
+}
+
+export declare interface IMargin {
+    marginTop: number;
+    marginRight: number;
+    marginBottom: number;
+    marginLeft: number;
+}
+
+export declare interface IPandding {
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
+    paddingLeft: number;
+}
+
+/**
+ * 专题数据接口
+ */
+export declare interface ISubjectData {
+    /** 专题ID */
+    id?: number | string;
+    /** 专题名称 */
+    name: string;
+    /** 专题描述 */
+    desc: string;
+    /** 刷新频率 */
+    refreshFrequency: string | number;
+    /** 时间间隔 */
+    timeInterval: string | number;
+}
+
+export declare type IThemeType = 'dashboard' | 'fullPage';
+
+/**
+ * RootStore State 类型
+ */
+export declare interface RootStoreState {
+    gridData: {
+        colArr: any[];
+        rowArr: any[];
+        cols: number;
+        rows: number;
+        colGap: number;
+        rowGap: number;
+    };
+    gridCells: ICell[];
+    subjectData: {
+        id?: number | string;
+        name: string;
+        desc: string;
+        refreshFrequency: string | number;
+        timeInterval: string | number;
+    };
+    themeType: IThemeType;
+    themes: {
+        dashboard: any;
+        fullPage: any;
+    };
+    rubberband: any;
+    selectedCells: HTMLElement[];
+    selectedCellIds: number[];
+    tmpData: {
+        colorPickerColors: string[];
+        propPopover: Record<string, boolean>;
+        showFullIndex: boolean;
+    };
+}
+
+/**
+ * useEditor Hook 返回值类型
+ */
+export declare interface UseEditorReturn {
+    /** 当前选中单元格的索引列表 */
+    selectedCellIndexes: ComputedRef<number[]>;
+    /**
+     * 清除所有选中的单元格
+     */
+    clearSelected: () => void;
+    /**
+     * 设置是否显示大屏索引
+     * @param val - 是否显示
+     */
+    setShowFullIndex: (val: boolean) => void;
+    /** 设置选中单元格 ID 列表 */
+    setSelectedCellIds: (ids: number[]) => void;
+    /**
+     * 重置编辑器状态
+     */
+    reset: () => void;
+}
+
+/**
+ * useGrid Hook 返回值类型
+ */
+export declare interface UseGridReturn {
+    /** 列模板字符串 (CSS grid-template-columns) */
+    colTemplate: ComputedRef<string>;
+    /** 行模板字符串 (CSS grid-template-rows) */
+    rowTemplate: ComputedRef<string>;
+    /** 总单元格数量 (rows * cols) */
+    divNum: ComputedRef<number>;
+    /** 有效单元格数量 (非空单元格) */
+    itemNum: ComputedRef<number>;
+    /** 所有有效单元格的 ID 列表 */
+    allCellIndexes: ComputedRef<number[]>;
+    /**
+     * 初始化行列数组和单元格列表
+     */
+    initRowAndColArr: () => void;
+    /**
+     * 初始化单个单元格对象
+     * @param index - 单元格索引
+     * @param empty - 是否创建空单元格（不计算坐标）
+     * @returns 单元格对象
+     */
+    initCellByIndex: (index: number, empty?: boolean) => ICell;
+    /**
+     * 更新单元格属性
+     * @param index - 单元格索引
+     * @param cell - 要更新的属性
+     * @param isMerged - 是否是合并操作
+     */
+    updateCell: (index: number, cell: Partial<ICell>, isMerged?: boolean) => void;
+    /**
+     * 更新单元格业务数据
+     * @param index - 单元格索引
+     * @param data - 业务数据对象
+     * @param isMerged - 是否合并数据
+     */
+    updateCellData: (index: number, data: Partial<ICellData> & Record<string, any>, isMerged?: boolean) => void;
+    /**
+     * 更新单元格样式
+     * @param index - 单元格索引
+     * @param type - 主题类型
+     * @param newCellStyle - 新的样式对象
+     * @param isMerge - 是否合并样式
+     */
+    updateCellStyle: (index: number, type: IThemeType, newCellStyle: Partial<ICellThemeStyle>, isMerge?: boolean) => void;
+    /**
+     * 获取单元格的最终样式（合并全局样式）
+     * @param index - 单元格索引
+     * @param type - 主题类型
+     * @returns 合并后的样式对象
+     */
+    getCellStyle: (index: number, type: IThemeType) => ICellThemeStyle;
+    /**
+     * 合并选中的单元格
+     * @param selectedCells - 选中的 DOM 元素列表
+     */
+    mergeCells: (selectedCells?: HTMLElement[]) => void;
+    /**
+     * 拆分单元格
+     * @param selectedCells - 选中的 DOM 元素列表
+     */
+    splitCell: (selectedCells?: HTMLElement[]) => void;
+    /**
+     * 重置网格布局（恢复默认间距，重新初始化）
+     */
+    resetLayout: () => void;
+    /**
+     * 获取纯 JSON 数据（用于保存或导出）
+     * @param isExport - 是否为导出模式
+     * @returns JSON 字符串
+     */
+    getPureJsonData: (isExport?: boolean) => string;
+    /**
+     * 初始化纯 JSON 数据（从文件或接口加载）
+     * @param jsonData - JSON 字符串或对象
+     */
+    initPureJsonData: (jsonData: string | Record<string, any>) => {
+        ok: true;
+    } | {
+        ok: false;
+        reason: string;
+    } | void;
+    /**
+     * 解析并应用数据
+     * @param data - 数据对象
+     */
+    parseData: (data: Record<string, any>) => void;
+}
+
+/**
+ * useMainStore 返回值类型（Facade）
+ * 组合了所有 hooks 的功能，并添加了 state 引用
+ */
+export declare interface UseMainStoreReturn {
+    gridData: Ref<any>;
+    gridCells: Ref<ICell[]>;
+    subjectData: Ref<any>;
+    themeType: Ref<IThemeType>;
+    themes: Ref<any>;
+    tmpData: Ref<any>;
+    selectedCells: Ref<HTMLElement[]>;
+    selectedCellIds: Ref<number[]>;
+    rubberband: Ref<any>;
+    colTemplate: ComputedRef<string>;
+    rowTemplate: ComputedRef<string>;
+    divNum: ComputedRef<number>;
+    itemNum: ComputedRef<number>;
+    allCellIndexes: ComputedRef<number[]>;
+    initRowAndColArr: () => void;
+    initCellByIndex: (index: number, empty?: boolean) => ICell;
+    updateCell: (index: number, cell: Partial<ICell>, isMerged?: boolean) => void;
+    updateCellData: (index: number, data: Partial<ICellData> & Record<string, any>, isMerged?: boolean) => void;
+    updateCellStyle: (index: number, type: IThemeType, newCellStyle: Partial<ICellThemeStyle>, isMerge?: boolean) => void;
+    getCellStyle: (index: number, type: IThemeType) => ICellThemeStyle;
+    mergeCells: (selectedCells?: HTMLElement[]) => void;
+    splitCell: (selectedCells?: HTMLElement[]) => void;
+    resetLayout: () => void;
+    getPureJsonData: (isExport?: boolean) => string;
+    initPureJsonData: (jsonData: string | Record<string, any>) => {
+        ok: true;
+    } | {
+        ok: false;
+        reason: string;
+    } | void;
+    parseData: (data: Record<string, any>) => void;
+    globalThemeStyle: ComputedRef<any>;
+    globalCellStyle: ComputedRef<ICellThemeStyle>;
+    updateGlobalThemeStyle: (themeStyle: Record<string, any>, type?: IThemeType) => void;
+    updateGlobalCellStyle: (type: IThemeType, style: Partial<ICellThemeStyle>) => void;
+    changeThemeType: (type: IThemeType) => void;
+    selectedCellIndexes: ComputedRef<number[]>;
+    clearSelected: () => void;
+    setShowFullIndex: (val: boolean) => void;
+    setSelectedCellIds: (ids: number[]) => void;
+    resetEditor: () => void;
+    /**
+     * 重置所有状态到初始值
+     */
+    $reset: () => void;
+}
+
+/**
+ * useTheme Hook 返回值类型
+ */
+export declare interface UseThemeReturn {
+    /** 当前主题的全局样式配置 */
+    globalThemeStyle: ComputedRef<any>;
+    /** 当前主题的全局单元格样式 */
+    globalCellStyle: ComputedRef<ICellThemeStyle>;
+    /**
+     * 更新全局主题样式
+     * @param themeStyle - 样式对象
+     * @param type - 主题类型（可选）
+     */
+    updateGlobalThemeStyle: (themeStyle: Record<string, any>, type?: IThemeType) => void;
+    /**
+     * 更新全局单元格样式
+     * @param type - 主题类型
+     * @param style - 样式对象
+     */
+    updateGlobalCellStyle: (type: IThemeType, style: Partial<ICellThemeStyle>) => void;
+    /**
+     * 切换当前主题类型
+     * @param type - 目标主题类型
+     */
+    changeThemeType: (type: IThemeType) => void;
+}
+
+export declare const VGridLayoutEditor: Plugin_2;
+
+export declare const VGridLayoutEditorComponent: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+
+/**
+ * 网格布局查看器插件
+ * 仅包含查看器组件
+ */
+export declare const VGridLayoutViewer: Plugin_2;
+
+export declare const VGridLayoutViewerComponent: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+
+export { }