@aham.ro/ui-designer 0.1.12 → 0.1.14

package/dist/Designer.vue.d.ts

@@ -1,5 +1,7 @@
+import { type WorkspaceData } from './stores/workspace';
 import type { MoreMenuItem, Template } from './widgets/header/types';
-interface Options {
+type NotificationTheme = 'info' | 'success' | 'warning' | 'danger';
+export interface Options {
     subject: string;
     templates: Template[];
     shared?: boolean;
@@ -9,6 +11,8 @@ interface Options {
     };
     size?: 'small' | 'medium' | 'large';
     moreItems?: MoreMenuItem[];
+    links?: Record<string, string>;
+    initialWorkspace?: WorkspaceData;
 }
 type __VLS_Props = {
     value: string;
@@ -17,20 +21,28 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     moreSelect: (id: string) => any;
+    save: (data: WorkspaceData, onSuccess: (versionId?: string) => void) => any;
     componentDrop: (type: string) => any;
     translationUpdate: (fieldId: string, value: string, language: string) => any;
     screenSelect: (screen: Template) => any;
     screenAdd: (screen: Template) => any;
     screenRename: (id: string, name: string) => any;
     themeUpdate: (color: string) => any;
+    publish: (templateId: string, versionId: string, onSuccess: (response?: unknown) => void) => any;
+    notify: (message: string, theme?: NotificationTheme | undefined) => any;
+    dirtyChange: (dirty: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onMoreSelect?: ((id: string) => any) | undefined;
+    onSave?: ((data: WorkspaceData, onSuccess: (versionId?: string) => void) => any) | undefined;
     onComponentDrop?: ((type: string) => any) | undefined;
     onTranslationUpdate?: ((fieldId: string, value: string, language: string) => any) | undefined;
     onScreenSelect?: ((screen: Template) => any) | undefined;
     onScreenAdd?: ((screen: Template) => any) | undefined;
     onScreenRename?: ((id: string, name: string) => any) | undefined;
     onThemeUpdate?: ((color: string) => any) | undefined;
+    onPublish?: ((templateId: string, versionId: string, onSuccess: (response?: unknown) => void) => any) | undefined;
+    onNotify?: ((message: string, theme?: NotificationTheme | undefined) => any) | undefined;
+    onDirtyChange?: ((dirty: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Designer } from './Designer.vue';
+export { default as Designer, type Options } from './Designer.vue';
 export { useChecklistStore } from './stores/checklist';
 export { useTemplatesStore } from './stores/templates';
 export type { DynamicTemplate, PredefinedTemplate, TemplateBase, TemplateRecord } from './stores/templates';
@@ -7,6 +7,8 @@ export type { ThemeData, ThemeVariable, ThemeVariableType } from './stores/theme
 export { useTranslationStore } from './stores/translations';
 export type { TranslationItem, TranslationItemInput } from './stores/translations';
 export { useWorkspaceStore } from './stores/workspace';
+export type { WorkspaceData } from './stores/workspace';
+export { useDesignerSessionStore } from './stores/session';
 export { default as ColorPicker } from './widgets/ColorPicker.vue';
 export * from './widgets/components';
 export type { ChecklistContext, ChecklistItem, MoreMenuItem, Template } from './widgets/header/types';
@@ -16,10 +18,12 @@ export { default as ThemeSidebar } from './widgets/ThemeSidebar.vue';
 export type { TranslationField } from './widgets/TranslationSidebar.vue';
 export { default as ComponentHandler } from './widgets/workspace/ComponentHandler.vue';
 export { default as Composer } from './widgets/workspace/Composer.vue';
-export { withEditable } from './widgets/workspace/editable';
-export type { EditablePropDefinition, EditablePropDefinitions } from './widgets/workspace/editable';
+export { withProperties } from './widgets/workspace/editable';
+export type { PropertyDefinition, PropertyDefinitions } from './widgets/workspace/editable';
 export { default as Renderer } from './widgets/workspace/Renderer.vue';
 export { default as Desktop } from './widgets/workspace/screens/Desktop.vue';
 export { default as Device } from './widgets/workspace/screens/Device.vue';
 export { default as Mobile } from './widgets/workspace/screens/Mobile.vue';
 export { default as Tablet } from './widgets/workspace/screens/Tablet.vue';
+export { render } from './preview';
+export type { PreviewRenderOptions } from './preview';

package/dist/preview.d.ts

@@ -0,0 +1,40 @@
+import './designer.css';
+import './style.css';
+import { type RenderWalker, type RenderTemplate } from './widgets/components/base';
+import type { ThemeData } from './stores/theme';
+import { type DesignerLinks } from './widgets/components/linkResolver';
+type Translation = {
+    componentId?: string;
+    key: string;
+    value?: string;
+    translations?: Record<string, string>;
+};
+type PreviewTemplate = RenderTemplate & {
+    templateId?: string;
+    templateName?: string;
+    templates?: Array<RenderTemplate & {
+        templateId?: string;
+        id?: string;
+        templateName?: string;
+    }>;
+    workspace?: {
+        templates?: Array<RenderTemplate & {
+            templateId?: string;
+            id?: string;
+            templateName?: string;
+        }>;
+    };
+    documentProps?: Record<string, Record<string, unknown>>;
+    translations?: Translation[];
+    form?: boolean;
+    theme?: ThemeData;
+};
+export type PreviewRenderOptions = {
+    links?: DesignerLinks;
+    walker?: RenderWalker;
+    form?: {
+        submit?: (payload: Record<string, FormDataEntryValue | boolean>) => void;
+    } | false;
+};
+export declare function render(template: PreviewTemplate, target: string, options?: PreviewRenderOptions): import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, import("vue").ComponentProvideOptions>, {}, {}, "", {}, any>;
+export {};

package/dist/stores/checklist.d.ts

@@ -1,6 +1,6 @@
 import type { ChecklistItem } from '../widgets/header/types';
 export type { ChecklistItem } from '../widgets/header/types';
-export declare const useChecklistStore: import("pinia").StoreDefinition<"checklist", {
+export declare const useChecklistStore: import("pinia").StoreDefinition<"designer/checklist", {
     items: ChecklistItem[];
 }, {}, {
     setComplete(id: string, complete?: boolean): void;

package/dist/stores/session.d.ts

@@ -0,0 +1,13 @@
+export declare const useDesignerSessionStore: import("pinia").StoreDefinition<"designer/session", {
+    isDirty: boolean;
+    isSaving: boolean;
+    isPublishing: boolean;
+    draftVersionId: string | undefined;
+    savedVersionId: string | undefined;
+}, {}, {
+    setDirty(value: boolean): void;
+    startSaving(): void;
+    markSaved(versionId?: string): void;
+    finishSaving(): void;
+    markPublished(versionId?: string): void;
+}>;

package/dist/stores/templates.d.ts

@@ -5,6 +5,10 @@ export interface TemplateBase {
     channel: string;
     version: string;
     changed: boolean;
+    hasDraft?: boolean;
+    draftVersionId?: string;
+    canDelete?: boolean;
+    requiredComponents?: string[];
 }
 export interface PredefinedTemplate extends TemplateBase {
     type: 'predefined';
@@ -14,7 +18,7 @@ export interface DynamicTemplate extends TemplateBase {
     content?: Record<string, unknown>;
 }
 export type TemplateRecord = PredefinedTemplate | DynamicTemplate;
-export declare const useTemplatesStore: import("pinia").StoreDefinition<"templates", {
+export declare const useTemplatesStore: import("pinia").StoreDefinition<"designer/templates", {
     templates: TemplateRecord[];
     template: TemplateRecord | null;
 }, {}, {

package/dist/stores/theme.d.ts

@@ -1,4 +1,4 @@
-export type ThemeVariableType = 'color' | 'size';
+export type ThemeVariableType = 'color' | 'size' | 'number' | 'font-family' | 'font-weight' | 'duration' | 'shadow' | 'text';
 export interface ThemeVariable {
     key: string;
     title: string;
@@ -9,17 +9,24 @@ export interface ThemeVariable {
         dark: string;
     };
     component?: string;
+    userCreated?: boolean;
 }
 export interface ThemeData {
     variables: ThemeVariable[];
-    values: Record<string, string>;
+    values: Record<string, ThemeValue | string>;
 }
-export declare const useThemeStore: import("pinia").StoreDefinition<"theme", {
+export interface ThemeValue {
+    light?: string;
+    dark?: string;
+}
+export declare const useThemeStore: import("pinia").StoreDefinition<"designer/theme", {
     variables: ThemeVariable[];
-    values: Record<string, string>;
+    values: Record<string, ThemeValue>;
 }, {}, {
     registerVariables(variables: ThemeVariable[]): void;
-    setValue(key: string, value: string): void;
+    addVariable(variable: ThemeVariable): void;
+    removeVariable(key: string): void;
+    setValue(key: string, value: string, dark?: boolean): void;
     value(variable: ThemeVariable, dark: boolean): string;
     exportData(): ThemeData;
     importData(data: ThemeData): void;

package/dist/stores/translations.d.ts

@@ -12,8 +12,9 @@ export type TranslationItemInput = Omit<TranslationItem, 'key' | 'translations'>
     value?: string;
     translations?: Record<string, string>;
 };
-export declare const useTranslationStore: import("pinia").StoreDefinition<"translations", {
+export declare const useTranslationStore: import("pinia").StoreDefinition<"designer/translations", {
     items: TranslationItem[];
+    languages: string[];
 }, {
     fields: (state: {
         items: {
@@ -25,8 +26,10 @@ export declare const useTranslationStore: import("pinia").StoreDefinition<"trans
             screenId?: string | undefined;
             componentId?: string | undefined;
         }[];
+        languages: string[];
     } & import("pinia").PiniaCustomStateProperties<{
         items: TranslationItem[];
+        languages: string[];
     }>) => {
         id: string;
         key: string;
@@ -37,11 +40,16 @@ export declare const useTranslationStore: import("pinia").StoreDefinition<"trans
         componentId?: string | undefined;
     }[];
 }, {
+    registerLanguages(languages: string[]): void;
     setItems(items: TranslationItemInput[]): void;
     setScreenItems(screenId: string, items: TranslationItemInput[]): void;
     setComponentItems(componentId: string, items: TranslationItemInput[]): void;
+    addLanguage(language: string): void;
+    removeLanguage(language: string): void;
     updateValue(id: string, value: string, language?: string): void;
     ensureValue(id: string, value: string, componentId?: string): void;
+    removeComponent(componentId: string): void;
+    reconcile(validIds: Set<string>): void;
     getValue(id: string, language?: string): string;
     remove(id: string): void;
     clear(): void;

package/dist/stores/workspace.d.ts

@@ -1,7 +1,9 @@
+import type { TranslationItem } from './translations';
 export interface WorkspaceComponent {
     id: string;
     type: string;
     props: ComponentProps;
+    layoutId?: string;
     children?: WorkspaceComponent[];
 }
 export declare const MAX_COMPONENT_DEPTH = 10;
@@ -19,20 +21,42 @@ export interface WorkspaceTemplateData {
     templateName: string;
     components: WorkspaceComponent[];
     documentProps: WorkspaceDeviceProps;
+    translations?: TranslationItem[];
+}
+export interface DynamicTemplateData {
+    id: string;
+    name: string;
+    version: string;
+    channel: string;
+    icon: string;
+    changed: boolean;
+    hasDraft?: boolean;
+    type: 'dynamic';
 }
 export interface WorkspaceData {
     templates: WorkspaceTemplateData[];
+    activeTemplateId?: string;
+    dynamicTemplates?: DynamicTemplateData[];
 }
+type WorkspaceSnapshot = {
+    components: WorkspaceComponent[];
+    templateComponents: Record<string, WorkspaceComponent[]>;
+    documentProps: Record<string, WorkspaceDeviceProps>;
+    selectedId?: string;
+};
 export declare function isWorkspaceData(value: unknown): value is WorkspaceData;
-export declare const useWorkspaceStore: import("pinia").StoreDefinition<"workspace", {
+export declare const useWorkspaceStore: import("pinia").StoreDefinition<"designer/workspace", {
     components: WorkspaceComponent[];
     selectedId: string | undefined;
+    selectedTemplateId: string | undefined;
     activeTemplateId: string | undefined;
     activeTemplateName: string;
     activeDevice: WorkspaceDevice;
     templateComponents: Record<string, WorkspaceComponent[]>;
     templateNames: Record<string, string>;
     documentProps: Record<string, WorkspaceDeviceProps>;
+    undoStack: WorkspaceSnapshot[];
+    redoStack: WorkspaceSnapshot[];
 }, {
     selectedIndex: (state: {
         components: {
@@ -44,24 +68,63 @@ export declare const useWorkspaceStore: import("pinia").StoreDefinition<"workspa
                 tablet?: Record<string, unknown> | undefined;
                 desktop?: Record<string, unknown> | undefined;
             };
+            layoutId?: string | undefined;
             children?: /*elided*/ any[] | undefined;
         }[];
         selectedId: string | undefined;
+        selectedTemplateId: string | undefined;
         activeTemplateId: string | undefined;
         activeTemplateName: string;
         activeDevice: WorkspaceDevice;
         templateComponents: Record<string, WorkspaceComponent[]>;
         templateNames: Record<string, string>;
         documentProps: Record<string, WorkspaceDeviceProps>;
+        undoStack: {
+            components: {
+                id: string;
+                type: string;
+                props: {
+                    base: Record<string, unknown>;
+                    phone?: Record<string, unknown> | undefined;
+                    tablet?: Record<string, unknown> | undefined;
+                    desktop?: Record<string, unknown> | undefined;
+                };
+                layoutId?: string | undefined;
+                children?: /*elided*/ any[] | undefined;
+            }[];
+            templateComponents: Record<string, WorkspaceComponent[]>;
+            documentProps: Record<string, WorkspaceDeviceProps>;
+            selectedId?: string | undefined;
+        }[];
+        redoStack: {
+            components: {
+                id: string;
+                type: string;
+                props: {
+                    base: Record<string, unknown>;
+                    phone?: Record<string, unknown> | undefined;
+                    tablet?: Record<string, unknown> | undefined;
+                    desktop?: Record<string, unknown> | undefined;
+                };
+                layoutId?: string | undefined;
+                children?: /*elided*/ any[] | undefined;
+            }[];
+            templateComponents: Record<string, WorkspaceComponent[]>;
+            documentProps: Record<string, WorkspaceDeviceProps>;
+            selectedId?: string | undefined;
+        }[];
     } & import("pinia").PiniaCustomStateProperties<{
         components: WorkspaceComponent[];
         selectedId: string | undefined;
+        selectedTemplateId: string | undefined;
         activeTemplateId: string | undefined;
         activeTemplateName: string;
         activeDevice: WorkspaceDevice;
         templateComponents: Record<string, WorkspaceComponent[]>;
         templateNames: Record<string, string>;
         documentProps: Record<string, WorkspaceDeviceProps>;
+        undoStack: WorkspaceSnapshot[];
+        redoStack: WorkspaceSnapshot[];
     }>) => number;
     selectedComponent: (state: {
         components: {
@@ -73,33 +136,76 @@ export declare const useWorkspaceStore: import("pinia").StoreDefinition<"workspa
                 tablet?: Record<string, unknown> | undefined;
                 desktop?: Record<string, unknown> | undefined;
             };
+            layoutId?: string | undefined;
             children?: /*elided*/ any[] | undefined;
         }[];
         selectedId: string | undefined;
+        selectedTemplateId: string | undefined;
         activeTemplateId: string | undefined;
         activeTemplateName: string;
         activeDevice: WorkspaceDevice;
         templateComponents: Record<string, WorkspaceComponent[]>;
         templateNames: Record<string, string>;
         documentProps: Record<string, WorkspaceDeviceProps>;
+        undoStack: {
+            components: {
+                id: string;
+                type: string;
+                props: {
+                    base: Record<string, unknown>;
+                    phone?: Record<string, unknown> | undefined;
+                    tablet?: Record<string, unknown> | undefined;
+                    desktop?: Record<string, unknown> | undefined;
+                };
+                layoutId?: string | undefined;
+                children?: /*elided*/ any[] | undefined;
+            }[];
+            templateComponents: Record<string, WorkspaceComponent[]>;
+            documentProps: Record<string, WorkspaceDeviceProps>;
+            selectedId?: string | undefined;
+        }[];
+        redoStack: {
+            components: {
+                id: string;
+                type: string;
+                props: {
+                    base: Record<string, unknown>;
+                    phone?: Record<string, unknown> | undefined;
+                    tablet?: Record<string, unknown> | undefined;
+                    desktop?: Record<string, unknown> | undefined;
+                };
+                layoutId?: string | undefined;
+                children?: /*elided*/ any[] | undefined;
+            }[];
+            templateComponents: Record<string, WorkspaceComponent[]>;
+            documentProps: Record<string, WorkspaceDeviceProps>;
+            selectedId?: string | undefined;
+        }[];
     } & import("pinia").PiniaCustomStateProperties<{
         components: WorkspaceComponent[];
         selectedId: string | undefined;
+        selectedTemplateId: string | undefined;
         activeTemplateId: string | undefined;
         activeTemplateName: string;
         activeDevice: WorkspaceDevice;
         templateComponents: Record<string, WorkspaceComponent[]>;
         templateNames: Record<string, string>;
         documentProps: Record<string, WorkspaceDeviceProps>;
+        undoStack: WorkspaceSnapshot[];
+        redoStack: WorkspaceSnapshot[];
     }>) => {
         props: {
             base: Record<string, unknown>;
         };
         id: string;
         type: string;
+        layoutId?: string;
         children?: WorkspaceComponent[];
     } | undefined;
 }, {
+    saveHistory(): void;
+    undo(): boolean;
+    redo(): boolean;
     setActiveTemplate(templateId?: string, templateName?: string): void;
     setActiveDevice(device: WorkspaceDevice): void;
     addComponent(type: string, index?: number, props?: Record<string, unknown>): {
@@ -108,13 +214,14 @@ export declare const useWorkspaceStore: import("pinia").StoreDefinition<"workspa
         props: ComponentProps;
     };
     selectDocument(): void;
-    addChildComponent(parentId: string, type: string, props?: Record<string, unknown>): {
+    addChildComponent(parentId: string, type: string, index?: number, props?: Record<string, unknown>): {
         id: string;
         type: string;
         props: ComponentProps;
     } | undefined;
     canAddChild(parentId: string): boolean;
     updateComponentProps(id: string, props: Record<string, unknown>): void;
+    updateComponentPropsAcrossDevices(id: string, props: Record<string, unknown>, syncKeys?: string[]): void;
     getComponentProps(component: WorkspaceComponent): Record<string, unknown>;
     selectComponent(index: number): {
         id: string;
@@ -125,18 +232,31 @@ export declare const useWorkspaceStore: import("pinia").StoreDefinition<"workspa
             tablet?: Record<string, unknown> | undefined;
             desktop?: Record<string, unknown> | undefined;
         };
+        layoutId?: string | undefined;
         children?: /*elided*/ any[] | undefined;
     } | undefined;
-    selectComponentById(id: string): WorkspaceComponent | undefined;
+    selectComponentById(id: string, templateId?: string): WorkspaceComponent | undefined;
     deselect(): void;
     deleteSelected(): void;
     move(from: number, to: number): void;
     moveComponentBefore(sourceId: string, targetId: string): void;
+    moveComponentAfter(sourceId: string, targetId: string): void;
     moveComponentToRoot(id: string, index?: number): void;
-    moveComponentInto(sourceId: string, parentId: string): void;
+    moveComponentInto(sourceId: string, parentId: string, index?: number): void;
+    moveComponentToTemplate(sourceId: string, targetTemplateId: string): void;
+    copyComponentToTemplate(sourceId: string, targetTemplateId: string): void;
+    setComponentProps(id: string, props: ComponentProps): boolean;
+    copyComponentProps(id: string, device?: WorkspaceDevice): {
+        base: Record<string, unknown>;
+    } | undefined;
+    pasteComponentProps(id: string, props: ComponentProps, device?: WorkspaceDevice): boolean;
     remove(id: string): void;
     findComponent(id: string): WorkspaceComponent | undefined;
+    findComponentsByType(type: string): WorkspaceComponent[];
     exportData(): WorkspaceData;
+    export(): WorkspaceData;
     importData(data: WorkspaceData): void;
+    import(data: WorkspaceData): void;
     removeComponent(components: WorkspaceComponent[], id: string): boolean;
 }>;
+export {};