@cocoar/vue-page-builder 2.1.0

package/dist/schema.d.ts

@@ -0,0 +1,185 @@
+export interface NodeStyle {
+    /** CSS gap value, e.g. '8px', '1rem'. Applied to container's inner layout. */
+    gap?: string;
+    /** CSS padding value. */
+    padding?: string;
+    /** CSS width value or flex share (number string like '2'). */
+    width?: string;
+    /** Align children (flex align-items) or self inside a row. */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+}
+interface PageNodeBase {
+    /** Stable UUID assigned by the builder. */
+    id: string;
+    style?: NodeStyle;
+}
+/** Root-level page container. Behaves like a column; always the schema root. */
+export interface PageRootNode extends PageNodeBase {
+    type: 'page';
+    children: PageNode[];
+}
+/**
+ * Generic flex container. Direction is toggleable in the props panel, so users
+ * never have to delete + recreate to switch between vertical and horizontal stacks.
+ */
+export interface StackNode extends PageNodeBase {
+    type: 'stack';
+    /** Flex direction. Defaults to 'column'. */
+    direction?: 'column' | 'row';
+    /** Wrap children to the next line. Only meaningful for direction = 'row'. */
+    wrap?: boolean;
+    children: PageNode[];
+}
+export interface CardNode extends PageNodeBase {
+    type: 'card';
+    title?: string;
+    children: PageNode[];
+}
+export interface SectionNode extends PageNodeBase {
+    type: 'section';
+    title?: string;
+    children: PageNode[];
+}
+export interface DividerNode extends PageNodeBase {
+    type: 'divider';
+}
+export interface SpacerNode extends PageNodeBase {
+    type: 'spacer';
+    /** CSS size, e.g. '24px'. Defaults to flex:1 (fills available space). */
+    size?: string;
+}
+export interface HeadingNode extends PageNodeBase {
+    type: 'heading';
+    text: string;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+export interface ParagraphNode extends PageNodeBase {
+    type: 'paragraph';
+    text: string;
+}
+export interface FieldValidation {
+    required?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    /** Field must equal the value of another named field. */
+    matchField?: string;
+    /** Overrides the default error message for any rule on this field. */
+    message?: string;
+}
+export interface TextInputNode extends PageNodeBase {
+    type: 'text-input';
+    /** When set, value is managed by the renderer and passed to actions. */
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    /** Controls HTML input type and autocomplete hints. Defaults to 'text'. */
+    inputType?: 'text' | 'email' | 'password' | 'url';
+    defaultValue?: string;
+    validation?: FieldValidation;
+    disabled?: boolean;
+}
+export interface CheckboxNode extends PageNodeBase {
+    type: 'checkbox';
+    /** When set, value is managed by the renderer and passed to actions. */
+    name?: string;
+    label: string;
+    defaultValue?: boolean;
+    validation?: Pick<FieldValidation, 'required'>;
+    disabled?: boolean;
+}
+export interface SelectNode extends PageNodeBase {
+    type: 'select';
+    /** When set, value is managed by the renderer and passed to actions. */
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    defaultValue?: string;
+    validation?: Pick<FieldValidation, 'required'>;
+    disabled?: boolean;
+}
+export interface ButtonNode extends PageNodeBase {
+    type: 'button';
+    label: string;
+    /** Action ID matched against the `actions` map passed to the renderer. */
+    action?: string;
+    /** When true, validates all named fields before calling the action. */
+    validates?: boolean;
+    icon?: string;
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    size?: 'xs' | 's' | 'm' | 'l';
+}
+export interface LinkNode extends PageNodeBase {
+    type: 'link';
+    label: string;
+    /** Action ID matched against the `actions` map passed to the renderer. */
+    action?: string;
+}
+export interface ImageNode extends PageNodeBase {
+    type: 'image';
+    /** Asset ID resolved by `assetResolver` at render time. Never a raw URL. */
+    assetId: string;
+    alt?: string;
+}
+export type ContainerNode = PageRootNode | StackNode | CardNode | SectionNode;
+export type PageNode = PageRootNode | StackNode | CardNode | SectionNode | DividerNode | SpacerNode | HeadingNode | ParagraphNode | TextInputNode | CheckboxNode | SelectNode | ButtonNode | LinkNode | ImageNode;
+export type ElementType = PageNode['type'];
+export declare function isContainerNode(node: PageNode): node is ContainerNode;
+/**
+ * Shared between `<CoarPageBuilder>` and `<CoarPageRenderer>`. The IDP / consumer
+ * passes the SAME config to both — the builder uses it to filter UI affordances
+ * (palette, add-child menu), the renderer uses it as the **security boundary**:
+ * disallowed nodes are never rendered, even if they appear in hand-written JSON.
+ */
+export interface PageConfig {
+    /**
+     * Element types permitted to appear in the tree. Omit to allow every type.
+     * `page` (the root marker) is always implicitly allowed regardless of this list.
+     */
+    allowedElements?: ElementType[];
+    /**
+     * Action IDs that buttons and links may reference. When provided, the builder's
+     * Action-ID input becomes a dropdown of these choices instead of free text.
+     * Omit to allow any string (development / single-tenant scenarios).
+     *
+     * Note: the renderer's `actions` map is the actual security boundary — it only
+     * invokes handlers that exist there. `availableActions` is a UX affordance so
+     * tenants pick from labeled choices instead of memorising IDs.
+     */
+    availableActions?: {
+        id: string;
+        label: string;
+    }[];
+    /**
+     * Resolves an `assetId` to a URL. Used by the builder for image thumbnails
+     * (in the canvas preview, props panel, and Preview-tab renderer) and by the
+     * runtime renderer for the final `<img src>` — same contract as the
+     * renderer's `:asset-resolver` prop.
+     *
+     * The IDP / consumer typically returns `${cdnBase}/${id}` or similar. When
+     * omitted, the builder shows placeholder thumbnails and the renderer falls
+     * back to its `:asset-resolver` prop only.
+     */
+    assetResolver?: (id: string) => string;
+    /**
+     * Opens the consumer's own asset picker UI (modal, drawer — whatever you
+     * want) and resolves to the chosen `assetId`, or `null` if the user
+     * cancelled. The library does not ship a picker — the IDP owns the entire
+     * UX (browse, upload, search, delete, categorisation, …).
+     *
+     * When omitted, the image element falls back to a free-text Asset ID input.
+     */
+    pickAsset?: (currentId?: string) => Promise<string | null>;
+}
+/**
+ * True when this element type is permitted by the config (or no config given).
+ * The root `page` type is always allowed — it's a schema-shape marker, not a
+ * user-placeable element.
+ */
+export declare function isElementAllowed(type: ElementType, config?: PageConfig): boolean;
+export {};
+//# sourceMappingURL=schema.d.ts.map

package/dist/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../src/schema.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@cocoar/vue-page-builder",
+  "version": "2.1.0",
+  "description": "Generic headless visual page builder and renderer for Vue 3 built on the Cocoar Design System",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cocoar-dev/cocoar-ui-vue.git",
+    "directory": "packages/page-builder"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "page-builder",
+    "low-code",
+    "visual-editor"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run --passWithNoTests",
+    "lint": "eslint src/"
+  },
+  "peerDependencies": {
+    "@cocoar/vue-ui": "2.1.0",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@cocoar/vue-ui": "workspace:*",
+    "vue": "^3.5.32"
+  }
+}