diff --git a/builder/__init__.py b/builder/__init__.py index 6cea18d86..6c7936ab3 100644 --- a/builder/__init__.py +++ b/builder/__init__.py @@ -1 +1 @@ -__version__ = "1.18.0" +__version__ = "1.0.0-dev" diff --git a/builder/ai_page_generator.py b/builder/ai_page_generator.py new file mode 100644 index 000000000..f18360585 --- /dev/null +++ b/builder/ai_page_generator.py @@ -0,0 +1,673 @@ +import json +import re + +import frappe +import litellm +import yaml +from frappe import _ +from frappe.utils.telemetry import capture + +from builder.utils import has_page_write, to_compact_yaml + +litellm.drop_params = True + + +TASK_PARAMS = { + "simple": {"max_tokens": 1000, "temperature": 0.5}, + "complex": {"max_tokens": 22000, "temperature": 0.7}, +} + + +# System Prompts + +MODIFY_PROMPT = ( + "You modify web sections in Frappe Builder's block system.\n" + "Return ONLY valid and compact YAML array. No markdown, no explanations.\n\n" + "# Schema\n" + "el: str\n" + "id: str # MUST preserve existing\n" + "name?: str\n" + "style?: dict # CSS-in-JS camelCase. Support interactive states like hover:backgroundColor, active:color.\n" + "c?: [el]\n" + "attrs?: dict\n" + "text?: str\n" + "m_style?: dict\n\n" + "Rules: Preserve ALL existing 'id' values. Only change what requested. Return COMPLETE structure. " + "Use %, rem for responsive widths. Top-level sections MUST be 100% width.\n" + "Wrap text in semantic elements — never place text directly in div/section.\n" + "Formatting: use flow style for all style dicts e.g. style: {color: '#fff', 'hover:backgroundColor': '#eee'}. " + "All images must be external URLs with proper alt text if replacing." + "Omit any key whose value is empty, null, or {}.\n" + "Gradients: ALWAYS use 'backgroundImage' (NOT 'background') for gradients. " + "The gradient value MUST be quoted to avoid YAML parse errors. " + "Example: backgroundImage: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'. " + "Never leave gradient strings unquoted." +) + +REWRITE_TEXT_PROMPT = ( + "You are a professional copywriter. Rewrite the provided text content to be more engaging and professional.\n" + "Return ONLY the rewritten text. No markdown, no explanations, no quotes." +) + +REPLACE_IMAGE_PROMPT = ( + "You are an image finder. Suggest a highly relevant, high-quality publicly available image URL " + "(different from what is provided).\n" + "Return ONLY the image URL. No markdown, no explanations, no quotes." +) + +GENERATE_PROMPT = """You are an expert web designer specializing in creating modern, responsive web pages using the Frappe Builder block system. + +Critical: Return ONLY a valid and compact YAML object. No markdown, no explanations. + +# Structure: +Return a single root block that represents the page (el: div, id: root). This block contains all sections in its 'c' (children) property. + +# Schema for the Page Container Object: +- el: div +- id: root +- name: body +- style: CSS-in-JS camelCase object for page-wide styles (e.g. { backgroundColor: '#f8f9fa', fontFamily: 'Inter', display: 'flex', flexDirection: 'column', alignItems: 'center' }) +- c: array of content blocks (sections, header, footer, etc.) + +# Content Block Schema: +- el: semantic HTML tag (section, nav, header, footer, h1-h3, p, span, button, a, img) +- name: descriptive name +- style: CSS-in-JS camelCase object. Include interactive states (e.g., 'hover:backgroundColor', 'active:transform', 'hover:color') for buttons and links. +- m_style: mobile overrides +- t_style: tablet overrides +- attrs: HTML attrs (src, alt, href, target) +- text: text content +- c: nested blocks array +- classes: CSS class names + +# Rules: +- The top-level Page block must have 'display: flex', 'flexDirection: column', and 'alignItems: center' to layout sections properly. +- All top-level sections inside 'c' MUST have 'width: 100%'. +- Modern harmonious color palettes. Good spacing. Professional concise copy. +- Interactive: Use hover states for buttons/links to make the page feel alive. +- Google Fonts via fontFamily (use ONLY the font name and not the fallback). +- Semantic HTML with alt texts. +- Create maximum 5 high quality sections +- Use semantic tags and wrap text in them. Never place text directly in a div/section without a semantic tag. +- Avoid using emojis in text content. Focus on professional tone. +- Gradients: ALWAYS use 'backgroundImage' (NOT 'background') for gradients. The value MUST be a quoted YAML string to avoid parse errors. Example: backgroundImage: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'. Never use unquoted gradient values.""" + +MODIFY_PROMPT_MAP = { + "rewrite_text": REWRITE_TEXT_PROMPT, + "replace_image": REPLACE_IMAGE_PROMPT, +} + + +def get_system_prompt(is_modify: bool, task_type: str | None = None) -> str: + if is_modify: + return MODIFY_PROMPT_MAP.get(task_type or "", MODIFY_PROMPT) + return GENERATE_PROMPT + + +def classify_task(is_modify: bool, task_type: str | None = None) -> str: + if is_modify and task_type in {"rewrite_text", "replace_image"}: + return "simple" + return "complex" + + +def compress_block_to_yaml(block: dict, depth: int = 0, task_tier: str = "complex") -> dict: + if not isinstance(block, dict): + return block + + out = {} + if block.get("element"): + out["el"] = block["element"] + if block.get("blockId"): + out["id"] = block["blockId"] + if block.get("blockName"): + out["name"] = block["blockName"] + + base_styles = block.get("baseStyles") or {} + if base_styles: + out["style"] = base_styles + + attrs = block.get("attributes") or {} + if attrs: + out["attrs"] = attrs + + if block.get("classes"): + out["classes"] = block["classes"] + if block.get("innerHTML"): + out["text"] = block["innerHTML"] + + mob = block.get("mobileStyles") or {} + if mob: + out["m_style"] = mob + + tab = block.get("tabletStyles") or {} + if tab and (task_tier == "complex" or depth <= 1): + out["t_style"] = tab + + children = [ + compress_block_to_yaml(c, depth + 1, task_tier) + for c in block.get("children", []) + if isinstance(c, dict) + ] + if children: + out["c"] = children + + return out + + +def extract_block_id(block_context: str) -> str | None: + """Extract blockId from raw JSON context without full re-parse later.""" + try: + data = json.loads(block_context) + if isinstance(data, list): + data = data[0] if data else {} + return data.get("blockId") if isinstance(data, dict) else None + except Exception: + return None + + +def strip_block_context(block_context: str, task_tier: str, task_type: str | None = None) -> str: + """Convert block JSON to compact YAML to reduce input tokens.""" + try: + data = json.loads(block_context) + except (json.JSONDecodeError, TypeError): + return block_context + + if isinstance(data, list): + data = data[0] if data else {} + if not isinstance(data, dict): + return block_context + + if task_type == "rewrite_text": + return data.get("innerHTML") or data.get("innerText") or "" + if task_type == "replace_image": + attrs = data.get("attributes", {}) + return to_compact_yaml({"src": attrs.get("src", ""), "alt": attrs.get("alt", "")}) + return to_compact_yaml([compress_block_to_yaml(data, 0, task_tier)]) + + +def expand_yaml_to_block(node: dict) -> dict: + """Expand compact YAML node back to Frappe Builder block schema.""" + if not isinstance(node, dict): + return node + + block = { + "element": node.get("el", "div"), + "blockName": node.get("name", ""), + "baseStyles": node.get("style", {}), + "attributes": node.get("attrs", {}), + "children": [expand_yaml_to_block(c) for c in node.get("c", []) if isinstance(c, dict)], + } + for yaml_key, block_key in [ + ("id", "blockId"), + ("text", "innerHTML"), + ("m_style", "mobileStyles"), + ("t_style", "tabletStyles"), + ("classes", "classes"), + ]: + if yaml_key in node: + block[block_key] = node[yaml_key] + + return block + + +def validate_image_data(image_data: str) -> str: + """Validate that image_data is a safe base64-encoded image data URL.""" + if not image_data.startswith("data:image/"): + frappe.throw(_("Invalid image data: must be a base64-encoded image data URL")) + if ";base64," not in image_data: + frappe.throw(_("Invalid image data: must be a base64-encoded data URL")) + # ~5 MB image ≈ ~6.7 MB base64 string + if len(image_data) > 7 * 1024 * 1024: + frappe.throw(_("Image is too large. Please use an image smaller than 5 MB.")) + return image_data + + +def build_user_message( + prompt: str, + is_modify: bool, + block_context: str | None = None, + task_type: str | None = None, + image_url: str | None = None, +) -> str | list: + if is_modify and block_context: + if task_type == "rewrite_text": + text = f'Text content to rewrite: "{block_context}"\n\nInstruction: {prompt}' + elif task_type == "replace_image": + text = f"Current image attributes:\n{block_context}\n\nInstruction: {prompt}" + else: + text = f"Block:\n{block_context}\n\nChange: {prompt}" + else: + text = f"Create a page for: {prompt}" + + if image_url: + return [ + {"type": "text", "text": text}, + {"type": "image_url", "image_url": {"url": image_url}}, + ] + return text + + +def call_llm(model: str, messages: list, params: dict, *, stream: bool, api_key: str | None = None): + """Call litellm. Returns chunk iterator (stream=True) or string (stream=False).""" + if model.startswith("gemini-"): + model = f"gemini/{model}" + + if "claude-" in model: + for m in messages: + if m["role"] == "system" and isinstance(m.get("content"), str): + m["content"] = [{"type": "text", "text": m["content"]}] + resp = litellm.completion(model=model, messages=messages, stream=stream, api_key=api_key, **params) + return resp if stream else (resp.choices[0].message.content or "") + + +def strip_fences(text: str) -> str: + text = re.sub(r"^```(?:yaml|json)?\s*\n?", "", text.strip()) + return re.sub(r"\n?```\s*$", "", text).strip() + + +def parse_blocks(content: str) -> dict: + """Parse LLM YAML output into a single block object.""" + parsed = yaml.safe_load(strip_fences(content)) + if isinstance(parsed, dict): + block = parsed + elif isinstance(parsed, list): + block = parsed[0] if parsed else {} + else: + raise ValueError("Not a valid block object") + + if not block: + raise ValueError("No valid blocks in response") + + if isinstance(block, dict) and not block.get("id"): + block["id"] = "root" + + return expand_yaml_to_block(block) + + +def run_llm_job( + prompt: str, + model: str, + api_key: str, + event_prefix: str, + is_modify: bool, + user: str | None = None, + page_id: str | None = None, + block_context: str | None = None, + task_type: str | None = None, + image_url: str | None = None, +): + user = user or frappe.session.user + + def emit(suffix, **kwargs): + event = f"{event_prefix}_{suffix}" + if page_id: + event = f"{event}_{page_id}" + payload = { + "page_id": page_id, + "task_type": task_type, + **kwargs, + } + frappe.publish_realtime(event, payload, user=user) + + task_tier = classify_task(is_modify=is_modify, task_type=task_type) + params = TASK_PARAMS[task_tier] + + cache_key = f"ai_streaming_content:{page_id}:{user}" if page_id else None + if cache_key: + frappe.cache().set_value(cache_key, {"content": "", "task_type": task_type}, expires_in_sec=600) + + if task_tier == "simple": + model = get_simple_model(model) + + action = "Modifying" if is_modify else "Generating" + model_label = get_model_label(model) + emit( + "progress", + status="generating", + message=f"{action} with {model_label}", + task_tier=task_tier, + model_used=model, + total_length=0, + ) + + original_id = None + stripped_context = None + if is_modify and block_context: + original_id = extract_block_id(block_context) + stripped_context = strip_block_context(block_context, task_tier, task_type=task_type) + + # Image is only applicable for generate/modify-block tasks, not simple text/image tasks + effective_image_url = image_url if task_type not in {"rewrite_text", "replace_image"} else None + + messages = [ + { + "role": "system", + "content": get_system_prompt(is_modify, task_type), + "cache_control": {"type": "ephemeral"}, + }, + { + "role": "user", + "content": build_user_message( + prompt, + is_modify, + block_context=stripped_context, + task_type=task_type, + image_url=effective_image_url, + ), + }, + ] + + content = "" + try: + last_stage = None + for chunk in call_llm(model, messages, params, stream=True, api_key=api_key): + if delta := chunk.choices[0].delta.content: + if not content: + emit("progress", message="Building...") + last_stage = "Building..." + content += delta + if cache_key: + frappe.cache().set_value( + cache_key, {"content": content, "task_type": task_type}, expires_in_sec=600 + ) + + emit("stream", chunk=delta, block_id=original_id, total_length=len(content)) + + stage = get_progress_stage(content) + if stage and stage != last_stage: + last_stage = stage + emit("progress", message=stage, total_length=len(content)) + + except ValueError as e: + if cache_key: + frappe.cache().delete_value(cache_key) + frappe.log_error(f"Parse error: {e}\nContent: {content}", f"{event_prefix} parse") + emit("error", message="Failed to parse AI response. The model returned invalid YAML.") + return + + except Exception as e: + if cache_key: + frappe.cache().delete_value(cache_key) + frappe.log_error(f"LLM job error: {e}", event_prefix) + emit("error", message=str(e)) + return + + if cache_key: + frappe.cache().delete_value(cache_key) + + success_message = "Modified block successfully" if is_modify else "Page generated successfully" + emit( + "complete", + block_id=original_id, + model_used=model, + task_tier=task_tier, + message=success_message, + ) + + +def generate_page_blocks( + prompt: str, + model: str, + api_key: str, + user: str | None = None, + page_id: str | None = None, + image_url: str | None = None, +): + run_llm_job( + prompt, + model, + api_key, + "ai_generation", + is_modify=False, + user=user, + page_id=page_id, + image_url=image_url, + ) + + +def modify_section_blocks( + prompt: str, + block_context: str, + model: str, + api_key: str, + user: str | None = None, + page_id: str | None = None, + task_type: str | None = None, + image_url: str | None = None, +): + run_llm_job( + prompt, + model, + api_key, + "ai_modify", + is_modify=True, + user=user, + page_id=page_id, + block_context=block_context, + task_type=task_type, + image_url=image_url, + ) + + +def enqueue_ai_job(fn, model=None, **kwargs): + if not frappe.has_permission("Builder Page", ptype="write"): + frappe.throw(_("You do not have permission to modify pages")) + settings = frappe.get_single("Builder Settings") + + if not model: + model = "openrouter" + + model = get_default_model(model) + + api_key = settings.get_password("ai_api_key", raise_exception=False) + if not api_key: + frappe.throw(_("Please configure an OpenRouter API key in Settings → AI")) + + frappe.enqueue( + fn, + model=model, + api_key=api_key, + user=frappe.session.user, + now=True, + **kwargs, + ) + capture("builder_ai_used", "builder") + frappe.local.response.http_status_code = 202 + return {"status": "accepted"} + + +AVAILABLE_MODELS = [ + { + "provider": "openrouter", + "models": [ + { + "name": "openrouter/anthropic/claude-sonnet-4.6", + "label": "Claude Sonnet 4.6 (Balanced)", + "max_tokens": 200000, + "vision": True, + }, + { + "name": "openrouter/anthropic/claude-haiku-4-6", + "label": "Claude Haiku 4.6 (Fast)", + "max_tokens": 200000, + "vision": True, + }, + { + "name": "openrouter/google/gemini-3.1-pro", + "label": "Gemini 3.1 Pro (Flagship)", + "max_tokens": 1048576, + "vision": True, + }, + { + "name": "openrouter/google/gemini-3-flash-preview", + "label": "Gemini 3 Flash (Fast)", + "max_tokens": 1048576, + "vision": True, + }, + { + "name": "openrouter/openai/gpt-5.4-mini", + "label": "GPT-5.4 Mini", + "max_tokens": 1000000, + "vision": True, + }, + { + "name": "openrouter/moonshotai/kimi-k2.5", + "label": "Kimi K2.5 (Cheapest)", + "max_tokens": 2000000, + "vision": True, + }, + { + "name": "openrouter/z-ai/glm-5", + "label": "GLM-5 (Balanced)", + "max_tokens": 200000, + "vision": True, + }, + { + "name": "openrouter/moonshotai/kimi-k2", + "label": "Kimi K2 (Generous Free Tier)", + "max_tokens": 131072, + "vision": False, + }, + ], + }, +] + + +def get_model_label(model_name: str) -> str: + for provider in AVAILABLE_MODELS: + for m in provider["models"]: + if m["name"] == model_name: + return m["label"] + # Fallback: clean up the name + return model_name.removeprefix("openrouter/").replace("/", " ").replace("-", " ").title() + + +def get_progress_stage(content: str) -> str | None: + lookback = content[-400:] + major_elements = ["section", "nav", "header", "footer"] + + # Find the most recent major element type + last_pos = -1 + found_el = None + for el in major_elements: + pos = lookback.rfind(f"el: {el}") + if pos > last_pos: + last_pos = pos + found_el = el + + if found_el and last_pos != -1: + part = lookback[last_pos:] + name_match = re.search(r"name:\s*['\"]?([^'\"\n]+)['\"]?", part) + if name_match: + block_name = name_match.group(1).strip() + if block_name.lower() not in {"body", "root", "container"}: + return f"Building {block_name}" + return None + + +PROVIDER_DEFAULT_MODEL: dict[str, str] = { + "openrouter": "openrouter/anthropic/claude-sonnet-4.6", +} + + +PROVIDER_SIMPLE_MODEL: dict[str, str] = { + "openrouter": "openrouter/google/gemini-3-flash-preview", +} + + +def detect_provider(model: str) -> str | None: + if model.lower().startswith("openrouter/"): + return "openrouter" + return None + + +def get_simple_model(model: str) -> str: + provider = detect_provider(model) + if provider is None: + if model in PROVIDER_SIMPLE_MODEL: + return PROVIDER_SIMPLE_MODEL[model] + return model + return PROVIDER_SIMPLE_MODEL.get(provider, model) + + +def get_default_model(model_or_provider: str) -> str: + if model_or_provider in PROVIDER_DEFAULT_MODEL: + return PROVIDER_DEFAULT_MODEL[model_or_provider] + return model_or_provider + + +@frappe.whitelist() +def get_ai_models(): + return AVAILABLE_MODELS + + +@frappe.whitelist() +@has_page_write() +def generate_page_from_prompt( + prompt: str, + page_id: str | None = None, + model: str | None = None, + image_data: str | None = None, +): + image_url = validate_image_data(image_data) if image_data else None + return enqueue_ai_job( + generate_page_blocks, prompt=prompt, page_id=page_id, model=model, image_url=image_url + ) + + +@frappe.whitelist() +@has_page_write() +def modify_section_from_prompt( + prompt: str, + block_context: str, + page_id: str | None = None, + task_type: str | None = None, + model: str | None = None, + image_data: str | None = None, +): + try: + json.loads(block_context) + except json.JSONDecodeError: + frappe.throw(_("Invalid block context JSON")) + image_url = validate_image_data(image_data) if image_data else None + return enqueue_ai_job( + modify_section_blocks, + prompt=prompt, + block_context=block_context, + page_id=page_id, + task_type=task_type, + model=model, + image_url=image_url, + ) + + +@frappe.whitelist() +@has_page_write() +def get_ai_streaming_content(page_id: str): + user = frappe.session.user + cache_key = f"ai_streaming_content:{page_id}:{user}" + return frappe.cache().get_value(cache_key) or {"content": None} + + +@frappe.whitelist() +@has_page_write() +def test_api_key(): + settings = frappe.get_single("Builder Settings") + model = settings.get("ai_model") or "openrouter" + api_key = settings.get_password("ai_api_key", raise_exception=False) + if not api_key: + return {"success": False, "message": _("Please set an OpenRouter API key")} + + actual_model = get_default_model(model) + if actual_model.startswith("gemini-"): + actual_model = f"gemini/{actual_model}" + try: + litellm.completion( + model=actual_model, + messages=[{"role": "user", "content": "Say 'OK' if you can read this"}], + max_tokens=10, + api_key=api_key, + ) + return {"success": True, "message": _("API key is valid")} + except Exception as e: + return {"success": False, "message": str(e)} diff --git a/builder/api.py b/builder/api.py index 6cd6a806f..fec7b87c9 100644 --- a/builder/api.py +++ b/builder/api.py @@ -1,79 +1,45 @@ -import json +import ipaddress import os +import socket from io import BytesIO from types import FunctionType, MethodType, ModuleType -from typing import TYPE_CHECKING, Any -from urllib.parse import unquote +from typing import Any +from urllib.parse import unquote, urlparse import frappe -import frappe.utils import requests from frappe.apps import get_apps as get_permitted_apps from frappe.core.doctype.file.file import get_local_image from frappe.core.doctype.file.utils import delete_file -from frappe.integrations.utils import make_post_request from frappe.model.document import Document from frappe.utils.caching import redis_cache from frappe.utils.safe_exec import NamespaceDict, get_safe_globals -from frappe.utils.telemetry import POSTHOG_HOST_FIELD, POSTHOG_PROJECT_FIELD from PIL import Image from werkzeug.wrappers import Response from builder import builder_analytics from builder.builder.doctype.builder_page.builder_page import BuilderPageRenderer +from builder.builder.doctype.builder_snapshot import builder_snapshot +from builder.utils import compact_json, has_page_read, has_page_write, normalize_renamed_doc @frappe.whitelist() -def get_blocks(prompt): - API_KEY = frappe.conf.openai_api_key - if not API_KEY: - frappe.throw("OpenAI API Key not set in site config.") - - messages = [ - { - "role": "system", - "content": "You are a website developer. You respond only with HTML code WITHOUT any EXPLANATION. You use any publicly available images in the webpage. You can use any font from fonts.google.com. Do not use any external css file or font files. DO NOT ADD
Component Style
"; }' + component_root.clientScript = {"js": block_javascript, "css": block_css} + component_root.attach_children(component_content) + component = frappe.get_doc( + { + "doctype": "Builder Component", + "block": component_root.as_json(), + } + ).insert() + + body = Block( + element="div", + originalElement="body", + ) + component_root_copy = Block(extendedFromComponent=component.name) + component_content_copy = Block( + isChildOfComponent=component.name, + referenceBlockId="comp-content", + ) + component_root_copy.attach_children(component_content_copy) + body.attach_children(component_root_copy) + + page = frappe.get_doc( + { + "doctype": "Builder Page", + "page_title": "Component Client Script Test", + "published": 1, + "route": "/component-client-script-test", + "blocks": body.as_json(wrap_in_array=True), + } + ).insert() + + try: + content = get_response_content("/component-client-script-test") + self.assertNotIn(block_javascript, content) + self.assertNotIn(block_css, content) + self.assertIn(r"<\/script>Component Script
", content) + self.assertIn(r"<\/style>Component Style
", content) + finally: + page.delete() + component.delete() + + def test_component_client_script_receives_context(self): + component_data_for_script = """ +component.update({ + "component_data": {"greeting": "hello from component data"}, +}) +""" + component_root = Block( + element="div", + blockId="script-root", + clientScript={"js": 'this.dataset.received = "ok";'}, + props={ + "title": { + "label": "Title", + "isStandard": True, + "isDynamic": False, + "isPassedDown": True, + "comesFrom": None, + "value": "Default Title", + "propOptions": { + "isRequired": False, + "type": "string", + "options": {"defaultValue": "Default Title"}, + }, + }, + }, + ) + component = frappe.get_doc( + { + "doctype": "Builder Component", + "block": component_root.as_json(), + "component_data_script": component_data_for_script, + } + ).insert() + + body = Block(element="div", originalElement="body") + component_root_copy = Block( + extendedFromComponent=component.name, + props={ + "title": { + "label": "Title", + "isStandard": True, + "isDynamic": False, + "isPassedDown": True, + "comesFrom": None, + "value": "Overridden Title", + "propOptions": { + "isRequired": False, + "type": "string", + "options": {"defaultValue": "Default Title"}, + }, + }, + }, + ) + body.attach_children(component_root_copy) + + page = frappe.get_doc( + { + "doctype": "Builder Page", + "page_title": "Component Client Script Args Test", + "published": 1, + "route": "/component-client-script-args-test", + "blocks": body.as_json(wrap_in_array=True), + } + ).insert() + + try: + content = get_response_content("/component-client-script-args-test") + self.assertIn("component_data, props", content) + self.assertIn('"greeting": "hello from component data"', content) + self.assertIn('"title": "Overridden Title"', content) + self.assertNotIn("/assets/builder/js/reactivity.js", content) + self.assertRegex( + content, + r"client_script_[a-z0-9_]+\)\.call\(" + r"document\.querySelector\('\[data-block-uid=\"[^\"]+\"\]'\), " + r'\{[^}]*"greeting": "hello from component data"[^}]*\}, ' + r'\{[^}]*"title": "Overridden Title"[^}]*\}\)', + ) + finally: + page.delete() + component.delete() + + def test_block_client_script_is_registered_once_and_invoked_per_block(self): + javascript = 'this.dataset.message = "Block Script";' + css = 'span::after { content: "Block Style"; }' + body = Block(element="div", originalElement="body") + for block_id in ("script-block-one", "script-block-two"): + body.attach_children( + Block( + element="div", + blockId=block_id, + clientScript={"js": javascript, "css": css}, + ) + ) + + page = frappe.get_doc( + { + "doctype": "Builder Page", + "page_title": "Block Client Script Test", + "published": 1, + "route": "/block-client-script-test", + "blocks": body.as_json(wrap_in_array=True), + } + ).insert() + + try: + content = get_response_content("/block-client-script-test") + self.assertNotIn(javascript, content) + self.assertNotIn(css, content) + self.assertIn(r"<\/script>Block Script", content) + self.assertIn(r"<\/style>Block Style", content) + self.assertEqual(content.count("async function client_script_"), 1) + self.assertEqual(content.count(").call(document.querySelector"), 2) + finally: + page.delete() + + def test_legacy_block_client_script_fallback(self): + javascript = 'this.dataset.legacy = "supported";' + legacy_block = Block(element="div", blockId="legacy-script-block").as_dict() + legacy_block.pop("clientScript") + legacy_block["blockClientScript"] = javascript + body = Block(element="div", originalElement="body").as_dict() + body["children"] = [legacy_block] + + page = frappe.get_doc( + { + "doctype": "Builder Page", + "page_title": "Legacy Block Client Script Test", + "published": 1, + "route": "/legacy-block-client-script-test", + "blocks": frappe.as_json([body]), + } + ).insert() + + try: + content = get_response_content("/legacy-block-client-script-test") + self.assertIn(javascript, content) + finally: + page.delete() + + normalized_block = Block(blockClientScript=javascript).as_dict() + self.assertEqual(normalized_block["clientScript"], {"js": javascript}) + self.assertNotIn("blockClientScript", normalized_block) + + def test_block_template_root_props(self): + template_root = Block( + element="section", + blockId="template-props-root", + props={ + "title": { + "label": "Title", + "isStandard": True, + "isDynamic": False, + "isPassedDown": True, + "comesFrom": None, + "value": None, + "propOptions": { + "isRequired": False, + "type": "string", + "options": {"defaultValue": "Template Title"}, + }, + } + }, + ) + title = Block(element="h2", blockId="template-title", innerHTML="Fallback") + title.set_dynamic_value("title", "key", "innerHTML", "props") + template_root.attach_children(title) + body = Block(element="div", originalElement="body") + body.attach_children(template_root) + + page = frappe.get_doc( + { + "doctype": "Builder Page", + "page_title": "Block Template Props Test", + "published": 1, + "route": "/block-template-props-test", + "blocks": body.as_json(wrap_in_array=True), + } + ).insert() + + try: + content = get_response_content("/block-template-props-test") + self.assertEqual("Template Title", get_html_for(content, "tag", "h2", only_content=True)) + finally: + page.delete() + + def test_component_data_uses_root_prop_defaults(self): + from builder.builder.doctype.builder_component.builder_component import get_component_data + + component_root = Block( + element="div", + props={ + "title": { + "isStandard": True, + "value": None, + "propOptions": { + "type": "string", + "options": {"defaultValue": "Default Title"}, + }, + } + }, + ) + component = frappe.get_doc( + { + "doctype": "Builder Component", + "block": component_root.as_json(), + "component_data_script": 'component["title"] = props.title', + } + ).insert() + + try: + self.assertEqual(get_component_data(component.name), {"title": "Default Title"}) + finally: + component.delete() + + def test_pinned_component_version_keeps_block_client_script(self): + old_script = 'this.dataset.version = "old";' + new_script = 'this.dataset.version = "new";' + component_root = Block( + element="div", + blockId="pinned-script-root", + clientScript={"js": old_script}, + props={ + "title": { + "isStandard": True, + "isPassedDown": True, + "value": "Pinned Prop Old", + } + }, + ) + component = frappe.get_doc( + { + "doctype": "Builder Component", + "block": component_root.as_json(), + } + ).insert() + pinned_version = ensure_component_version(component.name) + + component_root.clientScript = {"js": new_script} + component_root.props["title"]["value"] = "Pinned Prop New" + frappe.db.set_value( + "Builder Component", + component.name, + "block", + component_root.as_json(), + update_modified=False, + ) + frappe.clear_document_cache("Builder Component", component.name) + + body = Block(element="div", originalElement="body") + body.attach_children( + Block( + extendedFromComponent=component.name, + componentVersion=pinned_version, + ) + ) + page = frappe.get_doc( + { + "doctype": "Builder Page", + "page_title": "Pinned Block Client Script Test", + "published": 1, + "route": "/pinned-block-client-script-test", + "blocks": body.as_json(wrap_in_array=True), + } + ).insert() + + try: + content = get_response_content("/pinned-block-client-script-test") + self.assertIn(old_script, content) + self.assertNotIn(new_script, content) + self.assertIn("Pinned Prop Old", content) + self.assertNotIn("Pinned Prop New", content) + finally: + page.delete() + component.delete() + frappe.db.delete( + "Builder Snapshot", + {"reference_doctype": "Builder Component", "reference_name": component.name}, + ) + + def test_component_props(self): + component_root = Block(element="div", blockId="wrapper-block") + content_static_prop = Block( + blockId="static-content", element="h4", innerHTML="Component Props Content" + ) + content_dynamic_prop = Block( + blockId="dynamic-content", element="h4", innerHTML="Component Props Content" + ) + content_last_name = Block( + blockId="last-name-content", element="h4", innerHTML="Component Props Content" + ) + content_fallback = Block( + blockId="fallback-content", element="h4", innerHTML="Component Props Content" + ) + + content_static_prop.set_dynamic_value("first_name", "key", "innerHTML", "props") + content_dynamic_prop.set_dynamic_value("name", "key", "innerHTML", "componentData") + content_last_name.set_dynamic_value("last_name", "key", "innerHTML", "props") + content_fallback.set_dynamic_value("middle_name", "key", "innerHTML", "props") + + component_root.attach_children( + content_static_prop, content_dynamic_prop, content_last_name, content_fallback + ) + component_root.props = { + "first_name": { + "label": "First Name", + "isStandard": True, + "isDynamic": False, + "isPassedDown": True, + "comesFrom": None, + "value": "John", + "propOptions": { + "isRequired": False, + "type": "string", + "options": {"defaultValue": ""}, + }, + }, + "last_name": { + "label": "Last Name", + "isStandard": True, + "isDynamic": False, + "isPassedDown": True, + "comesFrom": None, + "value": "Doe", + "propOptions": { + "isRequired": False, + "type": "string", + "options": {"defaultValue": ""}, + }, + }, + } + component = frappe.get_doc( + { + "doctype": "Builder Component", + "block": component_root.as_json(), + "component_data_script": component_data_script, + } + ).insert() + + body = Block( + element="div", + originalElement="body", + ) + component_root_copy = Block(extendedFromComponent=component.name) + content_static_copy = Block(isChildOfComponent=component.name, referenceBlockId="static-content") + content_dynamic_copy = Block(isChildOfComponent=component.name, referenceBlockId="dynamic-content") + content_last_name_copy = Block( + isChildOfComponent=component.name, referenceBlockId="last-name-content" + ) + content_fallback_copy = Block(isChildOfComponent=component.name, referenceBlockId="fallback-content") + component_root_copy.attach_children( + content_static_copy, + content_dynamic_copy, + content_last_name_copy, + content_fallback_copy, + ) + body.attach_children(component_root_copy) + + page = frappe.get_doc( + { + "doctype": "Builder Page", + "page_title": "Component Props Test", + "published": 1, + "route": "/component-props-test", + "blocks": body.as_json(wrap_in_array=True), + } + ).insert() + + try: + content = get_response_content("/component-props-test") + self.assertEqual("John", get_html_for(content, "tag", "h4", only_content=True)) + self.assertEqual("John Doe", get_html_for(content, "tag", "h4", index=1, only_content=True)) + self.assertEqual("Doe", get_html_for(content, "tag", "h4", index=2, only_content=True)) + self.assertEqual( + "Component Props Content", get_html_for(content, "tag", "h4", index=3, only_content=True) + ) + finally: + page.delete() + component.delete() + + def test_std_props(self): + component_root = Block( + blockId="header-block", + element="header", + blockName="header", + ) + + component_title_block = Block(blockId="title-block", element="h1", innerHTML="Header Title") + component_title_block.set_dynamic_value("title", "key", "innerHTML", "props") + + component_age_block = Block(blockId="age-block", element="h4", innerHTML="Age") + component_age_block.set_dynamic_value("age", "key", "innerHTML", "props") + + component_badge_block = Block(blockId="badge-block", element="h6", innerHTML="Badge") + component_badge_block.visibilityCondition = { + "key": "show_badge", + "comesFrom": "props", + } + + component_root.attach_children(component_title_block, component_age_block, component_badge_block) + component_root.props = { + "title": { + "label": "Title", + "isStandard": True, + "isDynamic": False, + "isPassedDown": True, + "comesFrom": None, + "value": None, + "propOptions": { + "isRequired": False, + "type": "string", + "options": {"defaultValue": "Default Header Title"}, + }, + }, + "age": { + "label": "Age", + "isStandard": True, + "isDynamic": False, + "isPassedDown": True, + "comesFrom": None, + "value": None, + "propOptions": { + "isRequired": False, + "type": "number", + "options": {"defaultValue": 25}, + }, + }, + "show_badge": { + "label": "Show Badge", + "isStandard": True, + "isDynamic": False, + "isPassedDown": True, + "comesFrom": None, + "value": None, + "propOptions": { + "isRequired": False, + "type": "boolean", + "options": {"defaultValue": False}, + }, + }, + } + component = frappe.get_doc( + { + "doctype": "Builder Component", + "block": component_root.as_json(), + } + ).insert() + + body = Block( + element="div", + originalElement="body", + ) + + component_root_copy = Block(extendedFromComponent=component.name) + component_title_block_copy = Block(isChildOfComponent=component.name, referenceBlockId="title-block") + component_age_block_copy = Block(isChildOfComponent=component.name, referenceBlockId="age-block") + component_badge_block_copy = Block(isChildOfComponent=component.name, referenceBlockId="badge-block") + + component_root_copy.attach_children( + component_title_block_copy, component_age_block_copy, component_badge_block_copy + ) + body.attach_children(component_root_copy) + + page_with_default_values = frappe.get_doc( + { + "doctype": "Builder Page", + "page_title": "Std Props Test", + "published": 1, + "route": "/block-std-props-test-no-overrides", + "blocks": body.as_json(wrap_in_array=True), + } + ).insert() + + component_root_copy.props = { + "title": { + "label": "Title", + "isStandard": True, + "isDynamic": False, + "isPassedDown": True, + "comesFrom": None, + "value": "Overridden Header Title", + "propOptions": { + "isRequired": False, + "type": "string", + "options": {"defaultValue": "Default Header Title"}, + }, + }, + "age": { + "label": "Age", + "isStandard": True, + "isDynamic": False, + "isPassedDown": True, + "comesFrom": None, + "value": 29, + "propOptions": { + "isRequired": False, + "type": "number", + "options": {"defaultValue": 25}, + }, + }, + "show_badge": { + "label": "Show Badge", + "isStandard": True, + "isDynamic": False, + "isPassedDown": True, + "comesFrom": None, + "value": True, + "propOptions": { + "isRequired": False, + "type": "boolean", + "options": {"defaultValue": False}, + }, + }, + } + + page_with_overridden_values = frappe.get_doc( + { + "doctype": "Builder Page", + "page_title": "Std Props Test With Overrides", + "published": 1, + "route": "/block-std-props-test-overrides", + "blocks": body.as_json(wrap_in_array=True), + } + ).insert() + + try: + content_with_default_values = get_response_content("/block-std-props-test-no-overrides") + content_with_overridden_values = get_response_content("/block-std-props-test-overrides") + + self.assertEqual( + "Default Header Title", + get_html_for(content_with_default_values, "tag", "h1", only_content=True), + ) + self.assertEqual( + "25.0", get_html_for(content_with_default_values, "tag", "h4", only_content=True) + ) + self.assertFalse("Badge" in get_html_for(content_with_default_values, "tag", "h6")) + + self.assertEqual( + "Overridden Header Title", + get_html_for(content_with_overridden_values, "tag", "h1", only_content=True), + ) + self.assertEqual( + "29.0", get_html_for(content_with_overridden_values, "tag", "h4", only_content=True) + ) + self.assertTrue("Badge" in get_html_for(content_with_overridden_values, "tag", "h6")) + finally: + page_with_default_values.delete() + page_with_overridden_values.delete() + component.delete() + + def test_repeater_from_std_props(self): + component_root = Block( + blockId="navbar-wrapper-block", + element="header", + blockName="navbar", + ) + component_repeater_block = Block( + blockId="repeater-block", + element="nav", + blockName="nav", + isRepeaterBlock=True, + ) + component_repeater_block.attach_data_key("links", "innerHTML", type="key", comesFrom="props") + component_link_block = Block( + blockId="link-block", element="a", innerHTML="Home", attributes={"href": "/home"} + ) + component_link_block.set_dynamic_value("key", "key", "innerHTML") + component_link_block.set_dynamic_value("value", "attribute", "href") + + component_repeater_block.attach_children(component_link_block) + component_root.attach_children(component_repeater_block) + component_root.props = { + "links": { + "label": "Links", + "isStandard": True, + "isDynamic": False, + "isPassedDown": True, + "comesFrom": None, + "value": None, + "propOptions": { + "isRequired": False, + "type": "object", + "options": { + "minItems": None, + "maxItems": None, + "defaultValue": { + "1. Home": "/", + "2. Products": "/products", + "3. About Us": "/about", + }, + }, + }, + } + } + + component = frappe.get_doc( + { + "doctype": "Builder Component", + "block": component_root.as_json(), + } + ).insert() + + body = Block( + element="div", + originalElement="body", + ) + component_root_copy = Block(extendedFromComponent=component.name) + component_repeater_block_copy = Block( + isChildOfComponent=component.name, referenceBlockId="repeater-block", isRepeaterBlock=True + ) + component_link_block_copy = Block(isChildOfComponent=component.name, referenceBlockId="link-block") + component_repeater_block_copy.attach_children(component_link_block_copy) + component_root_copy.attach_children(component_repeater_block_copy) + body.attach_children(component_root_copy) + + page = frappe.get_doc( + { + "doctype": "Builder Page", + "page_title": "Std Props Repeater Test", + "published": 1, + "route": "/block-std-props-test", + "blocks": body.as_json(wrap_in_array=True), + } + ).insert() + try: + content = get_response_content("/block-std-props-test") + self.assertEqual("1. Home", get_html_for(content, "tag", "a", only_content=True)) + self.assertTrue('href="/"' in get_html_for(content, "tag", "a", only_content=False)) + self.assertEqual("2. Products", get_html_for(content, "tag", "a", index=1, only_content=True)) + self.assertTrue( + 'href="/products"' in get_html_for(content, "tag", "a", index=1, only_content=False) + ) + self.assertEqual("3. About Us", get_html_for(content, "tag", "a", index=2, only_content=True)) + self.assertTrue('href="/about"' in get_html_for(content, "tag", "a", index=2, only_content=False)) + finally: + page.delete() + component.delete() + + def test_dark_mode_img(self): + body = Block( + element="div", + originalElement="body", + ) + image_block = Block( + element="img", + attributes={ + "src": "/files/light-mode-image.png", + "darkSrc": "/files/dark-mode-image.png", + "alt": "Test Image", + }, + ) + image_block_only_dark_mode = Block( + element="img", + attributes={ + "darkSrc": "/files/another-dark-mode-image.png", + "alt": "Test Image", + }, + ) + body.attach_children(image_block, image_block_only_dark_mode) + + page = frappe.get_doc( + { + "doctype": "Builder Page", + "page_title": "Dark Mode Image Test", + "published": 1, + "route": "/dark-mode-image-test", + "blocks": body.as_json(wrap_in_array=True), + } + ).insert() + + try: + content = get_response_content("/dark-mode-image-test") + self.assertTrue( + 'src="/files/light-mode-image.png"' in get_html_for(content, "tag", "img", only_content=False) + ) + self.assertTrue( + 'srcset="/files/dark-mode-image.png"' + in get_html_for(content, "tag", "source", only_content=False) + ) + self.assertTrue( + 'src="/files/another-dark-mode-image.png"' + in get_html_for(content, "tag", "img", index=1, only_content=False) + ) + self.assertTrue("--builder-image-dim: brightness(0.85) contrast(1.05)" in content) + self.assertTrue("img { filter: var(--builder-image-dim, none) }" in content) + finally: + page.delete() + + def test_nested_repeater_from_page_data(self): + body = Block( + element="div", + originalElement="body", + ) + parent_repeater = Block(element="div", isRepeaterBlock=True) + child_repeater = Block(element="div", isRepeaterBlock=True) + wrapper_div = Block(element="div") + + parent_repeater.attach_data_key("item_group", "dataKey") + child_repeater.attach_data_key("group", "dataKey") + + item_name = Block(element="h2") + item_price = Block(element="span") + + item_name.set_dynamic_value("name", "key", "innerHTML") + item_price.set_dynamic_value("price", "key", "innerHTML") + + wrapper_div.attach_children(item_name, item_price) + child_repeater.attach_children(wrapper_div) + parent_repeater.attach_children(child_repeater) + body.attach_children(parent_repeater) + + page = frappe.get_doc( + { + "doctype": "Builder Page", + "page_title": "Nested Repeater Blocks Test", + "published": 1, + "route": "/nested-repeater-blocks-test", + "page_data_script": repeater_page_data_script, + "blocks": body.as_json(wrap_in_array=True), + } + ).insert() + + try: + content = get_response_content("/nested-repeater-blocks-test") + self.assertTrue("Item A1" in get_html_for(content, "tag", "h2")) + self.assertTrue("$10" in get_html_for(content, "tag", "span")) + self.assertTrue("Item A2" in get_html_for(content, "tag", "h2", index=1)) + self.assertTrue("$20" in get_html_for(content, "tag", "span", index=1)) + self.assertFalse("Item B1" in get_html_for(content, "tag", "h2")) + self.assertFalse("$15" in get_html_for(content, "tag", "span")) + self.assertFalse("Item B2" in get_html_for(content, "tag", "h2", index=1)) + self.assertFalse("$25" in get_html_for(content, "tag", "span", index=1)) + finally: + page.delete() + + def test_set_fonts(self): + from builder.builder.doctype.builder_page.builder_page import set_fonts + + font_map = {} + styles = [ + {"fontFamily": "Inter", "fontWeight": "bold"}, + {"fontFamily": "Inter", "fontWeight": 400}, + {"fontFamily": "'Open Sans'", "fontWeight": "600"}, + {"fontFamily": "Impact", "fontWeight": "800"}, # System font, should be skipped + {"fontFamily": "Inter", "fontWeight": "bold"}, # Duplicate + ] + + set_fonts(styles, font_map) + + self.assertIn("Inter", font_map) + self.assertIn("Open Sans", font_map) + self.assertNotIn("Impact", font_map) + + # Weights should be normalized to integers and deduplicated + self.assertEqual(font_map["Inter"]["weights"], [400, 700]) + self.assertEqual(font_map["Open Sans"]["weights"], [600]) + + def test_set_fonts_uses_primary_family_from_fallback_list(self): + from builder.builder.doctype.builder_page.builder_page import set_fonts + + font_map = {} + set_fonts([{"fontFamily": "Inter, sans-serif", "fontWeight": "500"}], font_map) + + # Only the first family is requested, not the whole CSS stack + self.assertIn("Inter", font_map) + self.assertNotIn("Inter, sans-serif", font_map) + + def test_get_google_font_urls(self): + from builder.builder.doctype.builder_page.builder_page import get_google_font_urls + + font_map = { + "Newsreader": {"weights": [500]}, + "Open Sans": {"weights": [700, 400]}, + "Foo & Bar": {"weights": [400]}, + } + urls = get_google_font_urls(font_map) + + # One combined request per family: 400 always included, weights sorted, family + # name URL-encoded (spaces -> +, reserved chars escaped so the URL can't break) + self.assertEqual( + urls, + [ + "https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500&display=swap", + "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap", + "https://fonts.googleapis.com/css2?family=Foo+%26+Bar:wght@400&display=swap", + ], + ) + + def test_get_google_font_urls_with_italics(self): + """Fonts used in italic get the ital axis in the same single request, + with 400 italic always included as a fallback instance.""" + from builder.builder.doctype.builder_page.builder_page import get_google_font_urls + + font_map = { + "Roboto": {"weights": [400, 700], "italics": [400]}, + "Lora": {"weights": [400], "italics": [600]}, + # untouched fonts keep the exact legacy URL shape + "Open Sans": {"weights": [400]}, + } + urls = get_google_font_urls(font_map) + self.assertEqual( + urls, + [ + "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap", + "https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,400;1,600&display=swap", + "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap", + ], + ) + + def test_italics_cascade_like_font_family(self): + """Italic usage is resolved on the rendered block tree with CSS cascade + semantics, not per style dict.""" + from builder.builder.doctype.builder_page.builder_page import get_block_html + + def block(styles, children=None, element="div"): + return {"element": element, "baseStyles": styles, "children": children or []} + + # child sets fontStyle without a family: italics land on the ancestor font + _, _, font_map, _ = get_block_html( + [block({"fontFamily": "Fraunces"}, [block({"fontStyle": "italic", "fontWeight": "600"})])] + ) + self.assertEqual(font_map["Fraunces"]["italics"], [600]) + + # italic parent, child only switches family: font-style inherits, so the + # child family needs its italic faces too + _, _, font_map, _ = get_block_html( + [block({"fontFamily": "Fraunces", "fontStyle": "italic"}, [block({"fontFamily": "Lora"})])] + ) + self.assertEqual(font_map["Fraunces"]["italics"], [400]) + self.assertEqual(font_map["Lora"]["italics"], [400]) + + # a child resetting fontStyle: normal breaks the cascade again + _, _, font_map, _ = get_block_html( + [ + block( + {"fontFamily": "Fraunces", "fontStyle": "italic"}, + [block({"fontFamily": "Lora", "fontStyle": "normal"})], + ) + ] + ) + self.assertNotIn("italics", font_map["Lora"]) + + def test_set_italics_from_html(self): + """/ and inline font-style inside innerHTML register italic usage + for the block's resolved font.""" + import bs4 as bs + + from builder.builder.doctype.builder_page.builder_page import set_italics_from_html + + font_map = {"Fraunces": {"weights": [400]}, "Lora": {"weights": [400]}} + soup = bs.BeautifulSoup( + "Fire is the only recipe and " + 'this too', + "html.parser", + ) + set_italics_from_html(soup, font_map, ancestor_font="Fraunces") + self.assertEqual(font_map["Fraunces"].get("italics"), [400]) + self.assertEqual(font_map["Lora"].get("italics"), [400]) + + # fonts that never made it into the map (e.g. system fonts) are ignored + font_map_2 = {} + set_italics_from_html(bs.BeautifulSoup("hi", "html.parser"), font_map_2, "Arial") + self.assertEqual(font_map_2, {}) + + def test_set_fonts_inherits_font_family_from_ancestor(self): + """set_fonts should use inherited_font when a style has fontWeight but no fontFamily.""" + from builder.builder.doctype.builder_page.builder_page import set_fonts + + font_map = {} + styles = [{"fontWeight": "600"}] + + # Without inherited_font, nothing should be added + set_fonts(styles, font_map) + self.assertEqual(font_map, {}) + + # With inherited_font, the ancestor font should be registered + set_fonts(styles, font_map, inherited_font="Newsreader") + self.assertIn("Newsreader", font_map) + self.assertIn(600, font_map["Newsreader"]["weights"]) + + def test_font_weight_inherited_from_parent_block(self): + """Child block with only fontWeight should inherit fontFamily from parent in font_map.""" + from builder.builder.doctype.builder_page.builder_page import get_block_html + + blocks = [ + { + "element": "div", + "originalElement": "body", + "baseStyles": {"fontFamily": "Newsreader"}, + "children": [ + { + "element": "h1", + "innerHTML": "Headline", + "baseStyles": {"fontWeight": "700"}, + "children": [], + } + ], + } + ] + _, _, font_map, _ = get_block_html(blocks) + self.assertIn("Newsreader", font_map) + self.assertIn(700, font_map["Newsreader"]["weights"]) + + def test_intervar_font_skipped(self): + """InterVar should not appear in the font_map — it is loaded via reset.css.""" + from builder.builder.doctype.builder_page.builder_page import get_block_html + + blocks = [ + { + "element": "div", + "originalElement": "body", + "baseStyles": {"fontFamily": "InterVar", "fontWeight": "400"}, + "children": [], + } + ] + _, _, font_map, _ = get_block_html(blocks) + self.assertNotIn("InterVar", font_map) + self.assertNotIn("intervar", font_map) + + def test_renders_blocks_with_stripped_empty_values(self): + """Blocks are saved with empty defaults (attributes={}, classes=[], dataKey=null, + empty styles, etc.) stripped out to keep documents small""" + import re + + from builder.builder.doctype.builder_page.builder_page import get_block_html + + def empties(): + return { + "rawStyles": {}, + "mobileStyles": {}, + "tabletStyles": {}, + "attributes": {}, + "customAttributes": {}, + "classes": [], + "props": {}, + "dynamicValues": [], + "dataKey": None, + "activeState": None, + } + + full = [ + { + "blockId": "root", + "element": "div", + "originalElement": "body", + "baseStyles": {"display": "flex"}, + "children": [ + { + "blockId": "child1", + "element": "h1", + "innerHTML": "Hello World!", + "baseStyles": {"color": "red"}, + "children": [], + **empties(), + } + ], + **empties(), + } + ] + stripped = [ + { + "blockId": "root", + "element": "div", + "originalElement": "body", + "baseStyles": {"display": "flex"}, + "children": [ + { + "blockId": "child1", + "element": "h1", + "innerHTML": "Hello World!", + "baseStyles": {"color": "red"}, + } + ], + } + ] + + # CSS class names are a random hash per render (frappe.generate_hash) — ignore them. + def normalize(text): + return re.sub(r"[0-9a-f]{8,}", "H", text) + + html_full, css_full, _, _ = get_block_html(full) + html_stripped, css_stripped, _, _ = get_block_html(stripped) + + self.assertIn("Hello World!", html_stripped) + self.assertEqual(normalize(html_full), normalize(html_stripped)) + self.assertEqual(normalize(css_full), normalize(css_stripped)) + + # A block carrying dynamicValues but with attributes/styles stripped used to + # raise KeyError in set_dynamic_content_placeholders — guard against regression. + dynamic = [ + { + "blockId": "root", + "element": "div", + "originalElement": "body", + "baseStyles": {"display": "flex"}, + "children": [ + { + "blockId": "img1", + "element": "img", + "dynamicValues": [ + {"key": "logo", "type": "attribute", "property": "src", "comesFrom": "dataScript"} + ], + } + ], + } + ] + html_dynamic, _, _, _ = get_block_html(dynamic) + self.assertIn("logo", html_dynamic) + + with_unset_style = [ + { + "blockId": "root", + "element": "div", + "originalElement": "body", + "baseStyles": {"color": "red", "display": None}, + "children": [], + } + ] + _, css_unset, _, _ = get_block_html(with_unset_style) + self.assertIn("color: red", css_unset) + self.assertNotIn("display:", css_unset) + self.assertNotIn("None", css_unset) + + def test_renders_legacy_raw_styles_from_base_styles(self): + from builder.builder.doctype.builder_page.builder_page import get_block_html + + blocks = [ + { + "blockId": "legacy", + "element": "button", + "baseStyles": {"background": "red"}, + "rawStyles": {"background": "blue", "hover:background-color": "black"}, + "children": [], + } + ] + + _, css, _, _ = get_block_html(blocks) + + self.assertIn("background: blue", css) + self.assertIn(":hover", css) + self.assertIn("background-color: black", css) + self.assertNotIn("background: red", css) + + def test_renders_legacy_raw_styles_from_component(self): + from builder.builder.doctype.builder_page.builder_page import get_block_html + + component_root = { + "blockId": "comp-root", + "element": "div", + "rawStyles": {"text-overflow": "ellipsis"}, + "children": [{"blockId": "comp-child", "element": "span", "rawStyles": {"flex-shrink": "0"}}], + } + component = frappe.get_doc( + {"doctype": "Builder Component", "block": frappe.as_json(component_root)} + ).insert() + + blocks = [ + { + "blockId": "instance", + "extendedFromComponent": component.name, + "children": [{"blockId": "comp-child", "isChildOfComponent": component.name}], + } + ] + + try: + _, css, _, _ = get_block_html(blocks) + self.assertIn("text-overflow: ellipsis", css) + self.assertIn("flex-shrink: 0", css) + finally: + component.delete() + + def test_renders_blocks_with_only_responsive_styles(self): + from builder.builder.doctype.builder_page.builder_page import get_block_html + + blocks = [{"blockId": "mobile-only", "element": "div", "mobileStyles": {"textOverflow": "ellipsis"}}] + + html, css, _, _ = get_block_html(blocks) + + self.assertIn("fb-", html) + self.assertIn("@media only screen and (max-width: 576px)", css) + self.assertIn("text-overflow: ellipsis", css) + + def test_conflicting_routes_picks_last_published(self): + """Pages sharing a route should resolve to the most recently published one.""" + from frappe.utils import add_to_date, now_datetime + from frappe.website.utils import clear_cache as clear_page_cache + + from builder.builder.doctype.builder_page.builder_page import find_page_with_path + + # Frappe strips leading slashes from routes during validation; use without slash + route = "conflicting-route-test" + + page_older = frappe.get_doc( + { + "doctype": "Builder Page", + "page_title": "Older Published Page", + "published": 1, + "route": route, + "blocks": Block( + element="div", + originalElement="body", + children=[Block(element="h1", innerHTML="Older Published Content")], + ).as_json(wrap_in_array=True), + } + ).insert() + + page_newer = frappe.get_doc( + { + "doctype": "Builder Page", + "page_title": "Newer Published Page", + "published": 1, + "route": route, + "blocks": Block( + element="div", + originalElement="body", + children=[Block(element="h1", innerHTML="Newer Published Content")], + ).as_json(wrap_in_array=True), + } + ).insert() + + def clear_caches(): + find_page_with_path.clear_cache() + clear_page_cache(route) + + try: + page_older.db_set("published_at", add_to_date(now_datetime(), days=-2)) + page_newer.db_set("published_at", add_to_date(now_datetime(), days=-1)) + clear_caches() + + content = get_response_content(f"/{route}") + self.assertIn("Newer Published Content", content) + + # Republish the older page — it should now be picked + page_older.db_set("published_at", now_datetime()) + clear_caches() + + content = get_response_content(f"/{route}") + self.assertIn("Older Published Content", content) + finally: + clear_caches() + page_older.delete() + page_newer.delete() + + def test_conflicting_routes_no_published_at_picks_last_created(self): + """When published_at is absent, the most recently created page should win.""" + from frappe.utils import add_to_date, now_datetime + from frappe.website.utils import clear_cache as clear_page_cache + + from builder.builder.doctype.builder_page.builder_page import find_page_with_path + + # Frappe strips leading slashes from routes during validation; use without slash + route = "conflicting-route-no-published-at-test" + + page_first = frappe.get_doc( + { + "doctype": "Builder Page", + "page_title": "First Created Page", + "published": 1, + "route": route, + "blocks": Block( + element="div", + originalElement="body", + children=[Block(element="h1", innerHTML="First Created Content")], + ).as_json(wrap_in_array=True), + } + ).insert() + + page_second = frappe.get_doc( + { + "doctype": "Builder Page", + "page_title": "Second Created Page", + "published": 1, + "route": route, + "blocks": Block( + element="div", + originalElement="body", + children=[Block(element="h1", innerHTML="Second Created Content")], + ).as_json(wrap_in_array=True), + } + ).insert() + + # Ensure page_first has an older creation timestamp as a tiebreaker + page_first.db_set("creation", add_to_date(now_datetime(), seconds=-10)) + + def clear_caches(): + find_page_with_path.clear_cache() + clear_page_cache(route) + + try: + # Both pages have no published_at; creation order should determine the winner + clear_caches() + content = get_response_content(f"/{route}") + self.assertIn("Second Created Content", content) + finally: + clear_caches() + page_first.delete() + page_second.delete() + @classmethod def tearDownClass(cls): cls.page.delete() cls.page_with_dynamic_route.delete() -def get_html_for(html, type, value, index=None): +def get_html_for(html, type, value, index=None, only_content=False, list_all=False): from bs4 import BeautifulSoup soup = BeautifulSoup(html, "html.parser") if type == "tag": results = soup.find_all(value) + if list_all: + return [result.decode_contents() if only_content else str(result) for result in results] result = ( results[index] if index is not None and index < len(results) else results[0] if results else None ) + if only_content and result: + return result.decode_contents() return str(result) if result else "" if type == "attribute": - results = soup.find_all(attrs=value) + results = soup.find_all(attrs={value: True}) + if list_all: + return [result.get(value) for result in results if result.get(value)] result = ( results[index] if index is not None and index < len(results) else results[0] if results else None ) - return str(result) if result else "" + return result.get(value) if result and result.get(value) else "" diff --git a/frontend/src/components/Controls/BlockStyleManager.vue b/builder/builder/doctype/builder_page_click/__init__.py similarity index 100% rename from frontend/src/components/Controls/BlockStyleManager.vue rename to builder/builder/doctype/builder_page_click/__init__.py diff --git a/builder/builder/doctype/builder_page_click/builder_page_click.json b/builder/builder/doctype/builder_page_click/builder_page_click.json new file mode 100644 index 000000000..647a10c2e --- /dev/null +++ b/builder/builder/doctype/builder_page_click/builder_page_click.json @@ -0,0 +1,86 @@ +{ + "actions": [], + "creation": "2026-06-23 00:00:00.000000", + "doctype": "DocType", + "engine": "InnoDB", + "field_order": [ + "path", + "element", + "text", + "is_unique", + "visitor_id" + ], + "fields": [ + { + "fieldname": "path", + "fieldtype": "Data", + "label": "Path", + "search_index": 1, + "set_only_once": 1 + }, + { + "fieldname": "element", + "fieldtype": "Data", + "label": "Element", + "set_only_once": 1 + }, + { + "fieldname": "text", + "fieldtype": "Data", + "label": "Text", + "set_only_once": 1 + }, + { + "fieldname": "is_unique", + "fieldtype": "Check", + "label": "Is Unique" + }, + { + "fieldname": "visitor_id", + "fieldtype": "Data", + "label": "Visitor ID", + "read_only": 1, + "search_index": 1 + } + ], + "in_create": 1, + "links": [], + "modified": "2026-06-23 00:00:00.000000", + "modified_by": "Administrator", + "module": "Builder", + "name": "Builder Page Click", + "owner": "Administrator", + "permissions": [ + { + "create": 1, + "delete": 1, + "email": 1, + "export": 1, + "print": 1, + "read": 1, + "report": 1, + "role": "System Manager", + "share": 1, + "write": 1 + }, + { + "create": 1, + "delete": 1, + "email": 1, + "export": 1, + "print": 1, + "read": 1, + "report": 1, + "role": "Website Manager", + "share": 1, + "write": 1 + } + ], + "read_only": 1, + "row_format": "Compressed", + "sort_field": "creation", + "sort_order": "DESC", + "states": [], + "title_field": "path", + "track_changes": 0 +} diff --git a/builder/builder/doctype/builder_page_click/builder_page_click.py b/builder/builder/doctype/builder_page_click/builder_page_click.py new file mode 100644 index 000000000..d0861d0c9 --- /dev/null +++ b/builder/builder/doctype/builder_page_click/builder_page_click.py @@ -0,0 +1,30 @@ +# Copyright (c) 2026, Frappe Technologies Pvt Ltd and contributors +# For license information, please see license.txt + +import frappe +from frappe.model.document import Document + + +class BuilderPageClick(Document): + # begin: auto-generated types + # This code is auto-generated. Do not modify anything in this block. + + from typing import TYPE_CHECKING + + if TYPE_CHECKING: + from frappe.types import DF + + element: DF.Data | None + is_unique: DF.Check + path: DF.Data | None + text: DF.Data | None + visitor_id: DF.Data | None + # end: auto-generated types + + @staticmethod + def clear_old_logs(days=180): + from frappe.query_builder import Interval + from frappe.query_builder.functions import Now + + table = frappe.qb.DocType("Builder Page Click") + frappe.db.delete(table, filters=(table.creation < (Now() - Interval(days=days)))) diff --git a/builder/builder/doctype/builder_project_folder/builder_project_folder.js b/builder/builder/doctype/builder_project_folder/builder_project_folder.js index 630d2761b..0a7278931 100644 --- a/builder/builder/doctype/builder_project_folder/builder_project_folder.js +++ b/builder/builder/doctype/builder_project_folder/builder_project_folder.js @@ -1,8 +1,21 @@ // Copyright (c) 2024, Frappe Technologies Pvt Ltd and contributors // For license information, please see license.txt -// frappe.ui.form.on("Builder Project Folder", { -// refresh(frm) { +frappe.ui.form.on("Builder Project Folder", { + refresh(frm) { + frm.get_field("is_standard").df.read_only = !frappe.boot.developer_mode; + frm.refresh_field("is_standard"); -// }, -// }); + if (frm.doc.is_standard && !frappe.boot.developer_mode) { + frm.disable_form(); + frm.dashboard.clear_comment(); + frm.dashboard.add_comment( + __( + "Standard folders cannot be modified. Please enable developer mode to edit standard folders.", + ), + "orange", + true, + ); + } + }, +}); diff --git a/builder/builder/doctype/builder_project_folder/builder_project_folder.json b/builder/builder/doctype/builder_project_folder/builder_project_folder.json index 7507969b7..db813b83f 100644 --- a/builder/builder/doctype/builder_project_folder/builder_project_folder.json +++ b/builder/builder/doctype/builder_project_folder/builder_project_folder.json @@ -6,6 +6,7 @@ "doctype": "DocType", "engine": "InnoDB", "field_order": [ + "is_standard", "folder_name" ], "fields": [ @@ -14,11 +15,18 @@ "fieldtype": "Data", "label": "Folder Name", "unique": 1 + }, + { + "default": "0", + "fieldname": "is_standard", + "fieldtype": "Check", + "label": "Is Standard" } ], + "grid_page_length": 50, "index_web_pages_for_search": 1, "links": [], - "modified": "2024-11-26 17:04:15.337801", + "modified": "2025-11-11 11:51:16.422175", "modified_by": "Administrator", "module": "Builder", "name": "Builder Project Folder", @@ -50,7 +58,8 @@ "write": 1 } ], + "row_format": "Dynamic", "sort_field": "creation", "sort_order": "DESC", "states": [] -} \ No newline at end of file +} diff --git a/builder/builder/doctype/builder_project_folder/builder_project_folder.py b/builder/builder/doctype/builder_project_folder/builder_project_folder.py index d36fd16d4..a2a910c2b 100644 --- a/builder/builder/doctype/builder_project_folder/builder_project_folder.py +++ b/builder/builder/doctype/builder_project_folder/builder_project_folder.py @@ -1,7 +1,7 @@ # Copyright (c) 2024, Frappe Technologies Pvt Ltd and contributors # For license information, please see license.txt -# import frappe +import frappe from frappe.model.document import Document @@ -15,6 +15,37 @@ class BuilderProjectFolder(Document): from frappe.types import DF folder_name: DF.Data | None + is_standard: DF.Check # end: auto-generated types - pass + def validate(self): + """Validate that standard folders cannot be edited if not in developer mode""" + if self.is_standard and not frappe.conf.get("developer_mode"): + if not is_system_activity(): + frappe.throw( + frappe._( + "Standard folders cannot be modified. Please enable developer mode to edit standard folders." + ), + frappe.PermissionError, + ) + + def on_trash(self): + """Prevent deletion of standard folders when not in developer mode""" + if self.is_standard and not frappe.conf.get("developer_mode"): + if not is_system_activity(): + frappe.throw( + frappe._( + "Standard folders cannot be deleted. Please enable developer mode to delete standard folders." + ), + frappe.PermissionError, + ) + + +def is_system_activity(): + return ( + frappe.flags.in_import + or frappe.flags.in_patch + or frappe.flags.in_migrate + or frappe.in_test + or frappe.flags.in_install + ) diff --git a/builder/builder/doctype/builder_variable/test_builder_variable.py b/builder/builder/doctype/builder_project_folder/test_builder_project_folder.py similarity index 60% rename from builder/builder/doctype/builder_variable/test_builder_variable.py rename to builder/builder/doctype/builder_project_folder/test_builder_project_folder.py index d20d8d6c8..965059ed8 100644 --- a/builder/builder/doctype/builder_variable/test_builder_variable.py +++ b/builder/builder/doctype/builder_project_folder/test_builder_project_folder.py @@ -2,7 +2,7 @@ # See license.txt # import frappe -from frappe.tests import IntegrationTestCase, UnitTestCase +from frappe.tests import IntegrationTestCase # On IntegrationTestCase, the doctype test records and all # link-field test record dependencies are recursively loaded @@ -11,18 +11,9 @@ IGNORE_TEST_RECORD_DEPENDENCIES = [] # eg. ["User"] -class UnitTestbuilderVariable(UnitTestCase): +class IntegrationTestBuilderProjectFolder(IntegrationTestCase): """ - Unit tests for builderVariable. - Use this class for testing individual functions and methods. - """ - - pass - - -class IntegrationTestbuilderVariable(IntegrationTestCase): - """ - Integration tests for builderVariable. + Integration tests for BuilderProjectFolder. Use this class for testing interactions between multiple components. """ diff --git a/builder/builder/doctype/builder_settings/builder_settings.json b/builder/builder/doctype/builder_settings/builder_settings.json index 5c927b034..bb1cbc2f7 100644 --- a/builder/builder/doctype/builder_settings/builder_settings.json +++ b/builder/builder/doctype/builder_settings/builder_settings.json @@ -13,9 +13,16 @@ "style_public_url", "favicon", "auto_convert_images_to_webp", + "disable_auto_dark_mode", "default_language", "landing_page_section", - "home_page" + "home_page", + "developer_options_section", + "execute_block_scripts_in_editor", + "restrict_click_handlers", + "ai_section", + "ai_api_key", + "persona_survey_done" ], "fields": [ { @@ -65,6 +72,13 @@ "fieldtype": "Check", "label": "Auto convert images to WebP" }, + { + "default": "0", + "description": "Disable automatic dark mode color scheme adjustments for all pages globally.", + "fieldname": "disable_auto_dark_mode", + "fieldtype": "Check", + "label": "Disable Auto Dark Mode" + }, { "default": "en", "description": "Default HTML lang code (e.g., en, es, fr)", @@ -85,13 +99,50 @@ "fieldtype": "Code", "label": "Body HTML", "options": "HTML" + }, + { + "fieldname": "developer_options_section", + "fieldtype": "Section Break", + "label": "Developer Options" + }, + { + "default": "Restricted", + "fieldname": "execute_block_scripts_in_editor", + "fieldtype": "Select", + "label": "Execute Block Scripts in Editor", + "options": "Don't Execute\nRestricted\nUnrestricted" + }, + { + "default": "1", + "fieldname": "restrict_click_handlers", + "fieldtype": "Check", + "label": "Restrict Click Handlers" + }, + { + "fieldname": "ai_section", + "fieldtype": "Section Break", + "label": "AI Settings" + }, + { + "description": "API key for the selected AI model provider", + "fieldname": "ai_api_key", + "fieldtype": "Password", + "label": "AI API Key" + }, + { + "default": "0", + "description": "Internal flag: set once the persona onboarding survey has been shown. Site-wide (Builder Settings is a Single) — acceptable proxy for per-user on single-user trial sites.", + "fieldname": "persona_survey_done", + "fieldtype": "Check", + "hidden": 1, + "label": "Persona Survey Done" } ], "hide_toolbar": 1, "index_web_pages_for_search": 1, "issingle": 1, "links": [], - "modified": "2025-02-19 14:34:18.392867", + "modified": "2026-06-05 16:00:00.000000", "modified_by": "Administrator", "module": "Builder", "name": "Builder Settings", @@ -113,8 +164,9 @@ "write": 1 } ], + "row_format": "Dynamic", "sort_field": "modified", "sort_order": "DESC", "states": [], "track_changes": 1 -} \ No newline at end of file +} diff --git a/builder/builder/doctype/builder_settings/builder_settings.py b/builder/builder/doctype/builder_settings/builder_settings.py index cab59e0e8..c28489429 100644 --- a/builder/builder/doctype/builder_settings/builder_settings.py +++ b/builder/builder/doctype/builder_settings/builder_settings.py @@ -5,6 +5,9 @@ from frappe.model.document import Document from frappe.utils import get_files_path from frappe.utils.caching import redis_cache +from frappe.website.utils import clear_cache + +from builder.utils import has_page_read, has_page_write class BuilderSettings(Document): @@ -18,9 +21,13 @@ class BuilderSettings(Document): auto_convert_images_to_webp: DF.Check body_html: DF.Code | None + default_language: DF.Data | None + disable_auto_dark_mode: DF.Check + execute_block_scripts_in_editor: DF.Literal["Don't Execute", "Restricted", "Unrestricted"] favicon: DF.AttachImage | None head_html: DF.Code | None home_page: DF.Data | None + restrict_click_handlers: DF.Check script: DF.Code | None script_public_url: DF.ReadOnly | None style: DF.Code | None @@ -32,6 +39,9 @@ def on_update(self): self.handle_script_update("style", "css", "css", "page_styles") if self.has_value_changed("home_page"): frappe.cache.delete_key("home_page") + if self.has_value_changed("disable_auto_dark_mode"): + # Clear cache for all pages since this is a global setting + clear_cache() def handle_script_update(self, attribute, script_type, extension, folder_name): if self.has_value_changed(attribute): @@ -71,18 +81,17 @@ def get_website_user_home_page(session_user=None): @frappe.whitelist() +@has_page_read() def get_components(): # in label value format return frappe.get_all("Builder Component", fields=["name as value", "component_name as label"]) @frappe.whitelist() -def replace_component(target_component: str, replace_with: str, filters=None): +@has_page_write("You don't have permission to access this component") +def replace_component(target_component: str, replace_with: str, filters: str | None = None): if not target_component or not replace_with: return - # check permissions - if not frappe.has_permission("Builder Page", ptype="write"): - frappe.throw(_("You don't have permission to access this component"), frappe.PermissionError) # check if the replace_with component exists if not frappe.db.exists("Builder Component", replace_with): @@ -92,7 +101,7 @@ def replace_component(target_component: str, replace_with: str, filters=None): pages = frappe.get_all( "Builder Page", fields=["name"], - filters=filters, + filters=frappe.parse_json(filters) if filters else {}, or_filters={ "blocks": ["like", f"%{target_component}%"], "draft_blocks": ["like", f"%{target_component}%"], @@ -105,10 +114,12 @@ def replace_component(target_component: str, replace_with: str, filters=None): @frappe.whitelist() @redis_cache() -def get_component_usage_count(component_id: str, filters=None): +def get_component_usage_count(component_id: str, filters: str | None = None): + if not frappe.has_permission("Builder Page", ptype="read"): + return {"count": 0, "pages": []} pages = frappe.get_all( "Builder Page", - filters=filters, + filters=frappe.parse_json(filters) if filters else {}, fields=["name", "page_title", "route", "preview"], or_filters={ "blocks": ["like", f"%{component_id}%"], diff --git a/builder/builder/doctype/builder_snapshot/__init__.py b/builder/builder/doctype/builder_snapshot/__init__.py new file mode 100644 index 000000000..e69de29bb diff --git a/builder/builder/doctype/builder_snapshot/builder_snapshot.json b/builder/builder/doctype/builder_snapshot/builder_snapshot.json new file mode 100644 index 000000000..3d5eba9a2 --- /dev/null +++ b/builder/builder/doctype/builder_snapshot/builder_snapshot.json @@ -0,0 +1,87 @@ +{ + "actions": [], + "allow_rename": 0, + "autoname": "format:SNAP-{####}", + "creation": "2026-06-10 00:00:00.000000", + "doctype": "DocType", + "engine": "InnoDB", + "field_order": [ + "reference_doctype", + "reference_name", + "snapshot_type", + "label", + "data" + ], + "fields": [ + { + "fieldname": "reference_doctype", + "fieldtype": "Link", + "in_list_view": 1, + "in_standard_filter": 1, + "label": "Reference Doctype", + "options": "DocType", + "reqd": 1 + }, + { + "fieldname": "reference_name", + "fieldtype": "Data", + "in_list_view": 1, + "in_standard_filter": 1, + "label": "Reference Name", + "reqd": 1 + }, + { + "fieldname": "snapshot_type", + "fieldtype": "Data", + "in_list_view": 1, + "in_standard_filter": 1, + "label": "Snapshot Type" + }, + { + "fieldname": "label", + "fieldtype": "Data", + "label": "Label" + }, + { + "fieldname": "data", + "fieldtype": "Code", + "label": "Data", + "options": "JSON", + "reqd": 1 + } + ], + "hide_toolbar": 1, + "index_web_pages_for_search": 0, + "links": [], + "modified": "2026-06-10 00:00:00.000000", + "modified_by": "Administrator", + "module": "Builder", + "name": "Builder Snapshot", + "naming_rule": "By script", + "owner": "Administrator", + "permissions": [ + { + "create": 1, + "delete": 1, + "email": 0, + "export": 1, + "print": 0, + "read": 1, + "report": 1, + "role": "System Manager", + "share": 0, + "write": 1 + }, + { + "create": 1, + "delete": 1, + "read": 1, + "role": "Website Manager", + "write": 1 + } + ], + "sort_field": "creation", + "sort_order": "DESC", + "states": [], + "track_changes": 0 +} diff --git a/builder/builder/doctype/builder_snapshot/builder_snapshot.py b/builder/builder/doctype/builder_snapshot/builder_snapshot.py new file mode 100644 index 000000000..cdadc47bd --- /dev/null +++ b/builder/builder/doctype/builder_snapshot/builder_snapshot.py @@ -0,0 +1,111 @@ +# Copyright (c) 2026, Frappe Technologies Pvt Ltd and contributors +# For license information, please see license.txt + +import frappe +from frappe.model.document import Document + +from builder.utils import compact_json + + +class BuilderSnapshot(Document): + # begin: auto-generated types + # This code is auto-generated. Do not modify anything in this block. + + from typing import TYPE_CHECKING + + if TYPE_CHECKING: + from frappe.types import DF + + data: DF.Code + label: DF.Data | None + reference_doctype: DF.Link + reference_name: DF.Data + snapshot_type: DF.Data | None + # end: auto-generated types + pass + + +def take_snapshot(reference_doctype, reference_name, fields, label=None, snapshot_type=None, transform=None): + """Capture the current value of `fields` on a document as a snapshot. + + Stores `{fieldname: value}` as JSON in the snapshot's `data` field. + Returns the new snapshot's name. + + `transform`, if given, is a callable that receives the captured + `{fieldname: value}` dict and returns a (possibly rewritten) dict to store. + It lets a consuming app post-process the captured values — e.g. pin + dependency versions into a JSON field — without this generic layer needing + any domain knowledge. + """ + doc = frappe.get_doc(reference_doctype, reference_name) + data = {field: doc.get(field) for field in fields} + if transform: + data = transform(data) + snapshot = frappe.get_doc( + { + "doctype": "Builder Snapshot", + "reference_doctype": reference_doctype, + "reference_name": reference_name, + "data": compact_json(data), + "label": label, + "snapshot_type": snapshot_type, + } + ).insert(ignore_permissions=True) + return snapshot.name + + +def get_snapshot_data(snapshot_name) -> dict: + """Return the stored `{fieldname: value}` dict for a snapshot.""" + snapshot = frappe.get_doc("Builder Snapshot", snapshot_name) + return frappe.parse_json(snapshot.data) + + +def get_versioned_doc(snapshot_name): + """Return the referenced doc with this snapshot's captured fields overlaid (unsaved). + + Like `get_doc`, but as the document looked at `snapshot_name` for the captured fields — + every other field comes from the current doc. If the referenced doc was deleted, the + captured fields are overlaid onto a fresh doc (non-captured fields are doctype defaults) + so the version stays resolvable. + """ + snapshot = frappe.get_doc("Builder Snapshot", snapshot_name) + try: + doc = frappe.get_doc(snapshot.reference_doctype, snapshot.reference_name) + except frappe.DoesNotExistError: + doc = frappe.new_doc(snapshot.reference_doctype) + doc.name = snapshot.reference_name + for field, value in frappe.parse_json(snapshot.data).items(): + doc.set(field, value) + return doc + + +def restore_snapshot(snapshot_name, save=True): + """Generic write-back: apply a snapshot's stored fields onto its document. + + Apps that need custom restore semantics (e.g. routing the value into a draft + field for review) should use `get_versioned_doc` / `get_snapshot_data` and apply + it themselves rather than calling this. + """ + doc = get_versioned_doc(snapshot_name) + if save: + doc.save() + return doc + + +def prune_snapshots(reference_doctype, reference_name, keep, snapshot_type=None): + """Delete the oldest snapshots beyond `keep` for a document. + + Optionally restrict pruning to a single `snapshot_type` so that other types + (e.g. manual checkpoints) are never auto-deleted. + """ + filters = {"reference_doctype": reference_doctype, "reference_name": reference_name} + if snapshot_type: + filters["snapshot_type"] = snapshot_type + names = frappe.get_all( + "Builder Snapshot", + filters=filters, + order_by="creation desc", + pluck="name", + ) + for name in names[keep:]: + frappe.delete_doc("Builder Snapshot", name, ignore_permissions=True) diff --git a/builder/builder/doctype/builder_token/__init__.py b/builder/builder/doctype/builder_token/__init__.py new file mode 100644 index 000000000..e69de29bb diff --git a/builder/builder/doctype/builder_variable/builder_variable.js b/builder/builder/doctype/builder_token/builder_token.js similarity index 87% rename from builder/builder/doctype/builder_variable/builder_variable.js rename to builder/builder/doctype/builder_token/builder_token.js index d38eda6ff..92cf72f6e 100644 --- a/builder/builder/doctype/builder_variable/builder_variable.js +++ b/builder/builder/doctype/builder_token/builder_token.js @@ -1,7 +1,7 @@ // Copyright (c) 2025, Frappe Technologies Pvt Ltd and contributors // For license information, please see license.txt -frappe.ui.form.on("Builder Variable", { +frappe.ui.form.on("Builder Token", { refresh: function (frm) { // Only show is_standard field in developer mode frm.get_field("is_standard").toggle(frappe.boot.developer_mode); diff --git a/builder/builder/doctype/builder_variable/builder_variable.json b/builder/builder/doctype/builder_token/builder_token.json similarity index 78% rename from builder/builder/doctype/builder_variable/builder_variable.json rename to builder/builder/doctype/builder_token/builder_token.json index 9919cdb5c..f12244c7e 100644 --- a/builder/builder/doctype/builder_variable/builder_variable.json +++ b/builder/builder/doctype/builder_token/builder_token.json @@ -5,7 +5,8 @@ "engine": "InnoDB", "field_order": [ "is_standard", - "variable_name", + "token_name", + "group", "type", "value", "dark_value" @@ -16,7 +17,7 @@ "fieldname": "type", "fieldtype": "Select", "label": "Type", - "options": "Color\nSpacing" + "options": "Color\nDimension\nFont" }, { "fieldname": "value", @@ -27,9 +28,10 @@ "reqd": 1 }, { - "fieldname": "variable_name", + "fieldname": "token_name", "fieldtype": "Data", - "label": "Variable Name", + "in_list_view": 1, + "label": "Token Name", "reqd": 1 }, { @@ -43,16 +45,23 @@ "fieldname": "dark_value", "fieldtype": "Data", "label": "Dark Value" + }, + { + "fieldname": "group", + "fieldtype": "Data", + "in_list_view": 1, + "in_standard_filter": 1, + "label": "Group" } ], "grid_page_length": 50, "hide_toolbar": 1, "index_web_pages_for_search": 1, "links": [], - "modified": "2025-08-18 19:54:11.776268", + "modified": "2026-05-24 12:00:00.000000", "modified_by": "Administrator", "module": "Builder", - "name": "Builder Variable", + "name": "Builder Token", "naming_rule": "By script", "owner": "Administrator", "permissions": [ @@ -80,5 +89,5 @@ "sort_field": "creation", "sort_order": "DESC", "states": [], - "title_field": "variable_name" + "title_field": "token_name" } diff --git a/builder/builder/doctype/builder_token/builder_token.py b/builder/builder/doctype/builder_token/builder_token.py new file mode 100644 index 000000000..e7177063f --- /dev/null +++ b/builder/builder/doctype/builder_token/builder_token.py @@ -0,0 +1,96 @@ +# Copyright (c) 2025, Frappe Technologies Pvt Ltd and contributors +# For license information, please see license.txt + +import uuid + +import frappe +from frappe.model.document import Document +from frappe.modules.export_file import delete_folder, export_to_files +from frappe.utils.caching import redis_cache +from frappe.website.utils import delete_page_cache + + +class BuilderToken(Document): + # begin: auto-generated types + # This code is auto-generated. Do not modify anything in this block. + + from typing import TYPE_CHECKING + + if TYPE_CHECKING: + from frappe.types import DF + + dark_value: DF.Data | None + group: DF.Data | None + is_standard: DF.Check + type: DF.Literal["Color", "Dimension", "Font"] + value: DF.Data + token_name: DF.Data + # end: auto-generated types + + def autoname(self): + if not self.name: + self.name = str(uuid.uuid4()) + + def after_insert(self): + clear_builder_token_cache() + + def on_update(self): + clear_builder_token_cache() + if self.is_standard: + export_to_files( + record_list=[["Builder Token", self.name, "builder_token"]], record_module="builder" + ) + + if self.has_value_changed("is_standard") and not self.is_standard: + delete_folder("builder", "builder_token", self.name) + + def on_trash(self): + clear_builder_token_cache() + if self.is_standard: + delete_folder("builder", "builder_token", self.name) + + +@redis_cache(ttl=10 * 24 * 3600) +def get_css_variables(): + builder_tokens = frappe.get_all("Builder Token", fields=["name", "value", "dark_value"]) + css_variables = {} + dark_mode_css_variables = {} + + for builder_token in builder_tokens: + if not builder_token.value: + continue + key = f"--{builder_token.name}" + css_variables[key] = builder_token.value + if builder_token.dark_value: + dark_mode_css_variables[key] = builder_token.dark_value + + return css_variables, dark_mode_css_variables + + +def get_variables_css() -> str: + """Render the CSS variables as an inline `:root {...}` rule. + + The /builder_assets/tokens.css route is a dynamically rendered page, not a + real file, so the preview/PDF generator can't fetch it (it blocks access to + non-existent local paths). Preview rendering inlines this string instead of + linking the route. Mirrors www/builder_assets/tokens.css.""" + css_variables, dark_mode_css_variables = get_css_variables() + if not css_variables: + return "" + + declarations = [] + for key, value in css_variables.items(): + dark_value = (dark_mode_css_variables or {}).get(key) + if dark_value is not None and dark_value != value: + declarations.append(f"{key}: light-dark({value}, {dark_value});") + else: + declarations.append(f"{key}: {value};") + + return ":root {\n" + "\n".join(declarations) + "\n}" + + +def clear_builder_token_cache(doc=None, method=None): + get_css_variables.clear_cache() + # bust the rendered page cache for tokens.css and its compat alias variables.css + delete_page_cache("builder_assets/tokens.css") + delete_page_cache("builder_assets/variables.css") diff --git a/builder/builder/doctype/builder_token/test_builder_token.py b/builder/builder/doctype/builder_token/test_builder_token.py new file mode 100644 index 000000000..eff2fa63a --- /dev/null +++ b/builder/builder/doctype/builder_token/test_builder_token.py @@ -0,0 +1,179 @@ +# Copyright (c) 2025, Frappe Technologies Pvt Ltd and Contributors +# See license.txt + +import json +import os +import tempfile + +import frappe +from frappe.tests.utils import FrappeTestCase + +from builder.builder.doctype.builder_page.builder_page import get_font_family, resolve_font_token +from builder.builder.doctype.builder_token.builder_token import get_css_variables, get_variables_css +from builder.builder.patches.refactor_builder_variables import build_maps, rewrite_doctype_blocks +from builder.utils import import_fixture_record, normalize_renamed_doc, sync_builder_tokens + + +def make_token(**kwargs): + defaults = {"doctype": "Builder Token", "token_name": "test-token", "type": "Color", "value": "#123456"} + return frappe.get_doc({**defaults, **kwargs}).insert() + + +class TestBuilderToken(FrappeTestCase): + def setUp(self): + get_css_variables.clear_cache() + + def test_token_is_named_with_a_uuid(self): + token = make_token(token_name="brand") + self.assertRegex(token.name, r"^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$") + + def test_css_variable_uses_the_token_id_as_its_handle(self): + token = make_token(token_name="with-value", value="#abcdef") + css_variables, _ = get_css_variables() + self.assertEqual(css_variables[f"--{token.name}"], "#abcdef") + + def test_dark_value_renders_as_light_dark(self): + token = make_token(token_name="duotone", value="#ffffff", dark_value="#000000") + self.assertIn(f"--{token.name}: light-dark(#ffffff, #000000);", get_variables_css()) + + def test_matching_dark_value_renders_once(self): + token = make_token(token_name="monotone", value="#ffffff", dark_value="#ffffff") + self.assertIn(f"--{token.name}: #ffffff;", get_variables_css()) + + def test_deleting_a_token_drops_it_from_the_css(self): + token = make_token(token_name="short-lived", value="#333333") + handle = f"--{token.name}" + self.assertIn(handle, get_variables_css()) + token.delete() + self.assertNotIn(handle, get_variables_css()) + + def test_editing_a_token_busts_the_css_cache(self): + token = make_token(token_name="cache-check", value="#111111") + self.assertIn("#111111", get_variables_css()) + token.value = "#222222" + token.save() + self.assertIn("#222222", get_variables_css()) + + +class TestFontToken(FrappeTestCase): + def setUp(self): + get_css_variables.clear_cache() + + def test_font_token_resolves_to_its_family(self): + token = make_token(token_name="display", type="Font", value="Fraunces") + self.assertEqual(resolve_font_token(f"var(--{token.name})"), "Fraunces") + self.assertEqual(get_font_family(f"var(--{token.name})"), "Fraunces") + + def test_unknown_font_token_resolves_to_nothing(self): + # an unresolvable token must not reach the Google Fonts URL builder + self.assertEqual(resolve_font_token("var(--does-not-exist)"), "") + + def test_plain_font_stack_is_left_alone(self): + self.assertEqual(get_font_family("Inter, sans-serif"), "Inter") + + +class TestRenamedFixtures(FrappeTestCase): + """Fixtures and template bundles written before the Builder Token rename.""" + + def test_pre_rename_doc_is_mapped(self): + docdict = {"doctype": "Builder Variable", "variable_name": "legacy", "value": "#fff"} + normalize_renamed_doc(docdict) + self.assertEqual(docdict["doctype"], "Builder Token") + self.assertEqual(docdict["token_name"], "legacy") + self.assertNotIn("variable_name", docdict) + + def test_a_current_doc_is_left_alone(self): + docdict = {"doctype": "Builder Token", "token_name": "current", "value": "#fff"} + self.assertEqual(normalize_renamed_doc(dict(docdict)), docdict) + + def test_token_name_already_present_wins(self): + docdict = {"doctype": "Builder Variable", "variable_name": "old", "token_name": "new"} + normalize_renamed_doc(docdict) + self.assertEqual(docdict["token_name"], "new") + + def test_pre_rename_fixture_imports_as_a_token(self): + name = frappe.generate_hash(length=10) + fixture = { + "doctype": "Builder Variable", + "name": name, + "variable_name": "fixture-color", + "type": "Color", + "value": "#123456", + "modified": "2026-01-01 00:00:00", + } + with tempfile.TemporaryDirectory() as folder: + path = os.path.join(folder, "fixture.json") + with open(path, "w") as f: + json.dump(fixture, f) + import_fixture_record(path) + + self.assertEqual(frappe.db.get_value("Builder Token", name, "token_name"), "fixture-color") + + def test_current_fixture_imports_unchanged(self): + name = frappe.generate_hash(length=10) + fixture = { + "doctype": "Builder Token", + "name": name, + "token_name": "current-fixture-color", + "type": "Color", + "value": "#abcdef", + "modified": "2026-01-01 00:00:00", + } + with tempfile.TemporaryDirectory() as folder: + path = os.path.join(folder, "fixture.json") + with open(path, "w") as f: + json.dump(fixture, f) + import_fixture_record(path) + + self.assertEqual(frappe.db.get_value("Builder Token", name, "value"), "#abcdef") + + def test_syncing_standard_tokens_is_safe_without_fixtures(self): + # after_install/after_migrate call this; builder ships no token fixtures + sync_builder_tokens() + + def test_a_missing_fixture_is_not_an_error(self): + with tempfile.TemporaryDirectory() as folder: + import_fixture_record(os.path.join(folder, "nope.json")) + + +class TestUUIDRefactorPatch(FrappeTestCase): + def test_build_maps_covers_every_legacy_name_shape(self): + tokens = [ + frappe._dict(name="brand_primary", token_name="brandPrimary"), + frappe._dict(name="a1b2c3d4e5", token_name="Accent"), + ] + rename_map, css_rewrite_map = build_maps(tokens) + + self.assertEqual(set(rename_map), {"brand_primary", "a1b2c3d4e5"}) + # kebab-cased label, snake-cased doc name and the older hex hash all resolve + self.assertEqual(css_rewrite_map["brand-primary"], rename_map["brand_primary"]) + self.assertEqual(css_rewrite_map["accent"], rename_map["a1b2c3d4e5"]) + self.assertEqual(css_rewrite_map["a1b2c3d4e5"], rename_map["a1b2c3d4e5"]) + + def test_rewrite_reaches_svg_markup(self): + blocks = [ + { + "blockId": "root", + "baseStyles": {"color": "var(--brand)", "border": "1px solid var(--brand-dark)"}, + "attributes": {"fill": "var(--brand)"}, + "innerHTML": '', + } + ] + page = frappe.get_doc( + {"doctype": "Builder Page", "page_title": "rewrite-probe", "blocks": json.dumps(blocks)} + ).insert() + + updated = rewrite_doctype_blocks( + "Builder Page", ["blocks"], {"brand": "new-brand", "brand-dark": "new-brand-dark"} + ) + self.assertGreaterEqual(updated, 1) + + rewritten = frappe.db.get_value("Builder Page", page.name, "blocks") + self.assertIn("var(--new-brand)", rewritten) + self.assertIn("var(--new-brand, #eee)", rewritten) + # longer keys match first, so brand-dark is not rewritten as brand + self.assertIn("var(--new-brand-dark)", rewritten) + self.assertNotIn("var(--brand", rewritten) + + def test_rewrite_without_a_map_touches_nothing(self): + self.assertEqual(rewrite_doctype_blocks("Builder Page", ["blocks"], {}), 0) diff --git a/builder/builder/doctype/builder_variable/builder_variable.py b/builder/builder/doctype/builder_variable/builder_variable.py deleted file mode 100644 index 265b38ddd..000000000 --- a/builder/builder/doctype/builder_variable/builder_variable.py +++ /dev/null @@ -1,69 +0,0 @@ -# Copyright (c) 2025, Frappe Technologies Pvt Ltd and contributors -# For license information, please see license.txt - -import frappe -from frappe.model.document import Document -from frappe.model.naming import append_number_if_name_exists -from frappe.modules.export_file import delete_folder, export_to_files -from frappe.utils.caching import redis_cache - -from builder.utils import camel_case_to_kebab_case - - -class BuilderVariable(Document): - # begin: auto-generated types - # This code is auto-generated. Do not modify anything in this block. - - from typing import TYPE_CHECKING - - if TYPE_CHECKING: - from frappe.types import DF - - dark_value: DF.Data | None - is_standard: DF.Check - type: DF.Literal["Color", "Spacing"] - value: DF.Data - variable_name: DF.Data - # end: auto-generated types - - def autoname(self): - self.name = append_number_if_name_exists("Builder Variable", frappe.scrub(self.variable_name)) - - def after_insert(self): - get_css_variables.clear_cache() - - def on_update(self): - get_css_variables.clear_cache() - if self.is_standard: - export_to_files( - record_list=[["Builder Variable", self.name, "builder_variable"]], record_module="builder" - ) - - if self.has_value_changed("is_standard") and not self.is_standard: - delete_folder("builder", "builder_variable", self.name) - - def on_trash(self): - get_css_variables.clear_cache() - if self.is_standard: - delete_folder("builder", "builder_variable", self.name) - - -@redis_cache(ttl=10 * 24 * 3600) -def get_css_variables(): - builder_variables = frappe.get_all("Builder Variable", fields=["variable_name", "value", "dark_value"]) - css_variables = {} - dark_mode_css_variables = {} - - for builder_variable in builder_variables: - if builder_variable.variable_name and builder_variable.value: - variable_name = f"--{camel_case_to_kebab_case(builder_variable.variable_name, True)}" - css_variables[variable_name] = builder_variable.value - - if hasattr(builder_variable, "dark_value") and builder_variable.dark_value: - dark_mode_css_variables[variable_name] = builder_variable.dark_value - - return css_variables, dark_mode_css_variables - - -def clear_builder_variable_cache(doc, method): - get_css_variables.clear_cache() diff --git a/builder/builder/doctype/user_font/user_font.py b/builder/builder/doctype/user_font/user_font.py index b0a848589..bdd7db1eb 100644 --- a/builder/builder/doctype/user_font/user_font.py +++ b/builder/builder/doctype/user_font/user_font.py @@ -1,9 +1,22 @@ # Copyright (c) 2024, Frappe Technologies Pvt Ltd and contributors # For license information, please see license.txt -# import frappe +import frappe from frappe.model.document import Document +from frappe.utils.caching import redis_cache + + +@redis_cache(ttl=60 * 60) +def get_all_user_fonts() -> list: + return frappe.get_all("User Font", fields=["font_name", "font_file"]) class UserFont(Document): - pass + def after_insert(self): + get_all_user_fonts.clear_cache() + + def on_update(self): + get_all_user_fonts.clear_cache() + + def on_trash(self): + get_all_user_fonts.clear_cache() diff --git a/builder/builder/patches/__init__.py b/builder/builder/patches/__init__.py new file mode 100644 index 000000000..e69de29bb diff --git a/builder/builder/patches/refactor_builder_variables.py b/builder/builder/patches/refactor_builder_variables.py new file mode 100644 index 000000000..d109c7793 --- /dev/null +++ b/builder/builder/patches/refactor_builder_variables.py @@ -0,0 +1,103 @@ +import re +import uuid + +import frappe + +from builder.builder.doctype.builder_token.builder_token import get_css_variables +from builder.utils import camel_case_to_kebab_case + +UUID_RE = re.compile(r"^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$") + + +def execute(): + """Migrate Builder Tokens to UUID names. + + 1. Assign a UUID to every token that doesn't already have one. + 2. Rewrite `var(--old-name)` → `var(--
+
+{% endblock %}
diff --git a/builder/www/404.py b/builder/www/404.py
new file mode 100644
index 000000000..4d28ec70c
--- /dev/null
+++ b/builder/www/404.py
@@ -0,0 +1,21 @@
+import frappe
+
+from builder.builder.doctype.builder_page.builder_page import find_page_with_path
+
+
+def get_context(context):
+ """Render a published Builder Page with route `404` as the site's not-found page.
+
+ Frappe's NotFoundPage always renders the `404` template, bypassing custom page
+ renderers, so this is the seam Builder uses to make the not-found page editable.
+ Falls back to the default 404.html template when no such page exists.
+ """
+ page_name = find_page_with_path("404")
+ if not page_name:
+ return
+
+ doc = frappe.get_cached_doc("Builder Page", page_name)
+ # BuilderPage.get_context does `del context.favicon`, which assumes the key exists.
+ context.setdefault("favicon", None)
+ doc.get_context(context)
+ context.template = "templates/generators/webpage.html"
diff --git a/builder/www/_builder.py b/builder/www/_builder.py
index f91d68cf2..ef019e3ba 100644
--- a/builder/www/_builder.py
+++ b/builder/www/_builder.py
@@ -1,5 +1,6 @@
import frappe
from frappe.integrations.frappe_providers.frappecloud_billing import is_fc_site
+from frappe.pulse.utils import get_app_version
from frappe.utils.telemetry import capture
from builder.hooks import builder_path
@@ -13,8 +14,10 @@ def get_context(context):
context.csrf_token = csrf_token
context.site_name = frappe.local.site
context.builder_path = builder_path
+ context.builder_version = get_app_version("builder")
# developer mode
context.is_developer_mode = frappe.conf.developer_mode
context.is_fc_site = is_fc_site()
+ context.is_read_only_mode = bool(frappe.flags.read_only)
if frappe.session.user != "Guest":
capture("active_site", "builder")
diff --git a/builder/www/builder_assets/Theme Switcher/theme-switcher.png b/builder/www/builder_assets/Theme Switcher/theme-switcher.png
new file mode 100644
index 000000000..b7bfaada6
Binary files /dev/null and b/builder/www/builder_assets/Theme Switcher/theme-switcher.png differ
diff --git a/builder/www/builder_assets/YouTube/youtube.png b/builder/www/builder_assets/YouTube/youtube.png
new file mode 100644
index 000000000..6580a139d
Binary files /dev/null and b/builder/www/builder_assets/YouTube/youtube.png differ
diff --git a/builder/www/builder_assets/color_scheme_variables.css b/builder/www/builder_assets/color_scheme_variables.css
deleted file mode 100644
index a85110918..000000000
--- a/builder/www/builder_assets/color_scheme_variables.css
+++ /dev/null
@@ -1,6 +0,0 @@
-[data-prefers-color-scheme="dark"] {
-{%- for key, value in dark_mode_css_variables.items() %}{{ key }}: {{ value }};{%- endfor %}}
-
-{%- if dark_mode_css_variables -%}[data-prefers-color-scheme="light"] {
-{%- for key, value in css_variables.items() %}{{ key }}: {{ value }};{%- endfor %}}
-{%- endif -%}
\ No newline at end of file
diff --git a/builder/www/builder_assets/tokens.css b/builder/www/builder_assets/tokens.css
new file mode 100644
index 000000000..792b25cb6
--- /dev/null
+++ b/builder/www/builder_assets/tokens.css
@@ -0,0 +1,3 @@
+{%- if css_variables -%}:root {
+{%- for key, value in css_variables.items() %}{%- set dark_value = (dark_mode_css_variables or {}).get(key) %}{{ key }}: {% if dark_value is not none and dark_value != value %}light-dark({{ value }}, {{ dark_value }}){% else %}{{ value }}{% endif %};
+{%- endfor %}}{%- endif -%}
\ No newline at end of file
diff --git a/builder/www/builder_assets/color_scheme_variables.py b/builder/www/builder_assets/tokens.py
similarity index 68%
rename from builder/www/builder_assets/color_scheme_variables.py
rename to builder/www/builder_assets/tokens.py
index 87bfe9796..eff7554e2 100644
--- a/builder/www/builder_assets/color_scheme_variables.py
+++ b/builder/www/builder_assets/tokens.py
@@ -1,4 +1,4 @@
-from builder.builder.doctype.builder_variable.builder_variable import get_css_variables
+from builder.builder.doctype.builder_token.builder_token import get_css_variables
def get_context(context):
diff --git a/builder/www/builder_assets/variables.css b/builder/www/builder_assets/variables.css
index 53218348d..792b25cb6 100644
--- a/builder/www/builder_assets/variables.css
+++ b/builder/www/builder_assets/variables.css
@@ -1,7 +1,3 @@
{%- if css_variables -%}:root {
-{%- for key, value in css_variables.items() %}{{ key }}: {{ value }};
-{%- endfor %}}{%- endif -%}
-
-{%- if dark_mode_css_variables -%}@media (prefers-color-scheme: dark) {:root {
-{%- for key, value in dark_mode_css_variables.items() %}{{ key }}: {{ value }};
-{%- endfor %}}}{%- endif -%}
\ No newline at end of file
+{%- for key, value in css_variables.items() %}{%- set dark_value = (dark_mode_css_variables or {}).get(key) %}{{ key }}: {% if dark_value is not none and dark_value != value %}light-dark({{ value }}, {{ dark_value }}){% else %}{{ value }}{% endif %};
+{%- endfor %}}{%- endif -%}
\ No newline at end of file
diff --git a/builder/www/builder_assets/variables.py b/builder/www/builder_assets/variables.py
index 87bfe9796..33137ce77 100644
--- a/builder/www/builder_assets/variables.py
+++ b/builder/www/builder_assets/variables.py
@@ -1,7 +1,5 @@
-from builder.builder.doctype.builder_variable.builder_variable import get_css_variables
+# Compat route: pages published before the Builder Token rename link
+# /builder_assets/variables.css. Serves the same CSS as tokens.css.
+from builder.www.builder_assets.tokens import get_context
-
-def get_context(context):
- css_variables, dark_mode_css_variables = get_css_variables()
- context.css_variables = css_variables
- context.dark_mode_css_variables = dark_mode_css_variables
+__all__ = ["get_context"]
diff --git a/commitlint.config.js b/commitlint.config.js
new file mode 100644
index 000000000..c95e42df7
--- /dev/null
+++ b/commitlint.config.js
@@ -0,0 +1,26 @@
+export default {
+ parserPreset: "conventional-changelog-conventionalcommits",
+ rules: {
+ "subject-empty": [2, "never"],
+ "type-case": [2, "always", "lower-case"],
+ "type-empty": [2, "never"],
+ "type-enum": [
+ 2,
+ "always",
+ [
+ "build",
+ "chore",
+ "ci",
+ "docs",
+ "feat",
+ "fix",
+ "perf",
+ "refactor",
+ "revert",
+ "style",
+ "test",
+ "deprecate",
+ ],
+ ],
+ },
+};
diff --git a/docker/init.sh b/docker/init.sh
index 2b276bcbb..49e6c86ae 100755
--- a/docker/init.sh
+++ b/docker/init.sh
@@ -1,39 +1,42 @@
-#!bin/bash
+#!/bin/bash
-if [ -d "/home/frappe/frappe-bench/apps/frappe" ]; then
+BENCH_DIR="/home/frappe/frappe-bench"
+SITE="builder.localhost"
+
+# Reuse an existing bench if one is already provisioned.
+if [ -d "$BENCH_DIR/apps/frappe" ]; then
echo "Bench already exists, skipping init"
- cd frappe-bench
+ cd "$BENCH_DIR"
bench start
-else
- echo "Creating new bench..."
+ exit 0
fi
+echo "Creating new bench..."
bench init --skip-redis-config-generation frappe-bench --version version-15
-
cd frappe-bench
-# Use containers instead of localhost
+# Point services at the compose containers instead of localhost.
bench set-mariadb-host mariadb
-bench set-redis-cache-host redis:6379
-bench set-redis-queue-host redis:6379
-bench set-redis-socketio-host redis:6379
+bench set-redis-cache-host "redis://redis:6379"
+bench set-redis-queue-host "redis://redis:6379"
+bench set-redis-socketio-host "redis://redis:6379"
-# Remove redis, watch from Procfile
+# Remove redis/watch entries from the Procfile (handled by compose).
sed -i '/redis/d' ./Procfile
sed -i '/watch/d' ./Procfile
bench get-app builder --branch develop
-bench new-site builder.localhost \
---force \
---mariadb-root-password 123 \
---admin-password admin \
---no-mariadb-socket
+bench new-site "$SITE" \
+ --force \
+ --mariadb-root-password 123 \
+ --admin-password admin \
+ --no-mariadb-socket
-bench --site builder.localhost install-app builder
-bench --site builder.localhost set-config developer_mode 1
-bench --site builder.localhost clear-cache
-bench --site builder.localhost set-config mute_emails 1
-bench use builder.localhost
+bench --site "$SITE" install-app builder
+bench --site "$SITE" set-config developer_mode 1
+bench --site "$SITE" set-config mute_emails 1
+bench --site "$SITE" clear-cache
+bench use "$SITE"
-bench start
\ No newline at end of file
+bench start
diff --git a/frappe-ui b/frappe-ui
index 372b85c56..1f237586d 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 372b85c56de6d2d1002c1623b424809031e1da21
+Subproject commit 1f237586d3675f840dba455ae5379a63073d6e42
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.cjs
similarity index 93%
rename from frontend/.eslintrc.js
rename to frontend/.eslintrc.cjs
index 43cfa2f5c..91365e161 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.cjs
@@ -1,11 +1,8 @@
-export default {
+module.exports = {
env: {
browser: true,
es2021: true,
},
- globals: {
- convertHTMLToBlocks: true,
- },
extends: ["plugin:vue/vue3-recommended", "prettier"],
parser: "vue-eslint-parser",
parserOptions: {
diff --git a/frontend/.gitignore b/frontend/.gitignore
index 53f7466ac..d451ff16c 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -2,4 +2,4 @@ node_modules
.DS_Store
dist
dist-ssr
-*.local
\ No newline at end of file
+*.local
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
index 6a3f64dbb..1f9c54463 100644
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@@ -7,6 +7,5 @@
"printWidth": 110,
"arrowParens": "always",
"trailingComma": "all",
- "plugins": ["prettier-plugin-tailwindcss"],
"tailwindConfig": "./tailwind.config.js"
}
diff --git a/frontend/auto-imports.d.ts b/frontend/auto-imports.d.ts
new file mode 100644
index 000000000..9d2400790
--- /dev/null
+++ b/frontend/auto-imports.d.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+
+}
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 658b0fa9c..f13c75f16 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -1,20 +1,29 @@
/* eslint-disable */
// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
+
export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
- AlertDialog: typeof import('./src/components/AlertDialog.vue')['default']
+ AIPageGeneratorModal: typeof import('./src/components/AIPageGeneratorModal.vue')['default']
+ AnalyticsEmptyState: typeof import('./src/components/Settings/AnalyticsEmptyState.vue')['default']
AnalyticsFilters: typeof import('./src/components/Settings/AnalyticsFilters.vue')['default']
AnalyticsOverview: typeof import('./src/components/Settings/AnalyticsOverview.vue')['default']
- AppsMenu: typeof import('./src/components/AppsMenu.vue')['default']
- AuthenticatedUser: typeof import('./src/components/Icons/AuthenticatedUser.vue')['default']
+ AnglePicker: typeof import('./src/components/Controls/AnglePicker.vue')['default']
+ ArrayEditor: typeof import('./src/components/ArrayEditor.vue')['default']
+ ArrayInput: typeof import('./src/components/ArrayInput.vue')['default']
+ ArrayOptions: typeof import('./src/components/PropsOptions/ArrayOptions.vue')['default']
+ AttributePropertyControl: typeof import('./src/components/Controls/AttributePropertyControl.vue')['default']
Autocomplete: typeof import('./src/components/Controls/Autocomplete.vue')['default']
BackgroundHandler: typeof import('./src/components/BackgroundHandler.vue')['default']
+ BasePropertyControl: typeof import('./src/components/Controls/BasePropertyControl.vue')['default']
+ BlankPageCard: typeof import('./src/components/Templates/BlankPageCard.vue')['default']
BlockContextMenu: typeof import('./src/components/BlockContextMenu.vue')['default']
BlockEditor: typeof import('./src/components/BlockEditor.vue')['default']
BlockFlexLayoutHandler: typeof import('./src/components/BlockFlexLayoutHandler.vue')['default']
@@ -23,51 +32,60 @@ declare module 'vue' {
BlockLayers: typeof import('./src/components/BlockLayers.vue')['default']
BlockPositionHandler: typeof import('./src/components/BlockPositionHandler.vue')['default']
BlockProperties: typeof import('./src/components/BlockProperties.vue')['default']
- Blocks: typeof import('./src/components/Icons/Blocks.vue')['default']
BlockSnapGuides: typeof import('./src/components/BlockSnapGuides.vue')['default']
- BlockStyleManager: typeof import('./src/components/Controls/BlockStyleManager.vue')['default']
+ BooleanOptions: typeof import('./src/components/PropsOptions/BooleanOptions.vue')['default']
BorderRadiusHandler: typeof import('./src/components/BorderRadiusHandler.vue')['default']
BoxResizer: typeof import('./src/components/BoxResizer.vue')['default']
BuilderAssets: typeof import('./src/components/BuilderAssets.vue')['default']
BuilderBlock: typeof import('./src/components/BuilderBlock.vue')['default']
BuilderBlockTemplates: typeof import('./src/components/BuilderBlockTemplates.vue')['default']
- BuilderButton: typeof import('./src/components/Controls/BuilderButton.vue')['default']
BuilderCanvas: typeof import('./src/components/BuilderCanvas.vue')['default']
- BuilderInput: typeof import('./src/components/BuilderInput.vue')['default']
+ BuilderCommandPalette: typeof import('./src/components/BuilderCommandPalette.vue')['default']
BuilderLeftPanel: typeof import('./src/components/BuilderLeftPanel.vue')['default']
BuilderRightPanel: typeof import('./src/components/BuilderRightPanel.vue')['default']
BuilderSettings: typeof import('./src/components/BuilderSettings.vue')['default']
BuilderToolbar: typeof import('./src/components/BuilderToolbar.vue')['default']
- Chart: typeof import('./src/components/Icons/Chart.vue')['default']
- Code: typeof import('./src/components/Icons/Code.vue')['default']
CodeEditor: typeof import('./src/components/Controls/CodeEditor.vue')['default']
CodeMirrorEditor: typeof import('./src/components/Controls/CodeMirror/CodeMirrorEditor.vue')['default']
CollapsibleSection: typeof import('./src/components/CollapsibleSection.vue')['default']
ColorInput: typeof import('./src/components/Controls/ColorInput.vue')['default']
+ ColorOptions: typeof import('./src/components/PropsOptions/ColorOptions.vue')['default']
ColorPicker: typeof import('./src/components/Controls/ColorPicker.vue')['default']
- Component: typeof import('./src/components/Icons/Component.vue')['default']
+ ColorPickerContent: typeof import('./src/components/Controls/ColorPickerContent.vue')['default']
+ CommandPalette: typeof import('./src/components/CommandPalette.vue')['default']
+ CommandPaletteItem: typeof import('./src/components/CommandPaletteItem.vue')['default']
+ ComponentUpdates: typeof import('./src/components/ComponentUpdates.vue')['default']
ContextMenu: typeof import('./src/components/ContextMenu.vue')['default']
- Cross: typeof import('./src/components/Icons/Cross.vue')['default']
CSS: typeof import('./src/components/Icons/CSS.vue')['default']
+ CursorTooltip: typeof import('./src/components/CursorTooltip.vue')['default']
CustomSearchPanel: typeof import('./src/components/Controls/CodeMirror/CustomSearchPanel.vue')['default']
+ DashboardContent: typeof import('./src/components/DashboardContent.vue')['default']
+ DashboardHead: typeof import('./src/components/DashboardHead.vue')['default']
DashboardSidebar: typeof import('./src/components/DashboardSidebar.vue')['default']
+ DashboardToolbar: typeof import('./src/components/DashboardToolbar.vue')['default']
DataLoaderBlock: typeof import('./src/components/DataLoaderBlock.vue')['default']
Dialog: typeof import('./src/components/Controls/Dialog.vue')['default']
DimensionInput: typeof import('./src/components/DimensionInput.vue')['default']
DraggablePopup: typeof import('./src/components/Controls/DraggablePopup.vue')['default']
+ DropIndicator: typeof import('./src/components/DropIndicator.vue')['default']
+ DynamicValueDropdown: typeof import('./src/components/DynamicValueDropdown.vue')['default']
DynamicValueHandler: typeof import('./src/components/Controls/DynamicValueHandler.vue')['default']
EditableSpan: typeof import('./src/components/EditableSpan.vue')['default']
EyeDropper: typeof import('./src/components/Icons/EyeDropper.vue')['default']
Files: typeof import('./src/components/Icons/Files.vue')['default']
FitScreen: typeof import('./src/components/Icons/FitScreen.vue')['default']
- Folder: typeof import('./src/components/Icons/Folder.vue')['default']
+ FontInput: typeof import('./src/components/Controls/FontInput.vue')['default']
FontUploader: typeof import('./src/components/Controls/FontUploader.vue')['default']
+ GlobalAI: typeof import('./src/components/Settings/GlobalAI.vue')['default']
GlobalAnalytics: typeof import('./src/components/Settings/GlobalAnalytics.vue')['default']
GlobalCode: typeof import('./src/components/Settings/GlobalCode.vue')['default']
+ GlobalDeveloper: typeof import('./src/components/Settings/GlobalDeveloper.vue')['default']
+ GlobalDomains: typeof import('./src/components/Settings/GlobalDomains.vue')['default']
GlobalGeneral: typeof import('./src/components/Settings/GlobalGeneral.vue')['default']
- GlobalMeta: typeof import('./src/components/Settings/GlobalMeta.vue')['default']
GlobalRedirects: typeof import('./src/components/Settings/GlobalRedirects.vue')['default']
- Globe: typeof import('./src/components/Icons/Globe.vue')['default']
+ GlobalUsers: typeof import('./src/components/Settings/GlobalUsers.vue')['default']
+ GradientEditor: typeof import('./src/components/Controls/GradientEditor.vue')['default']
+ ImageOptions: typeof import('./src/components/PropsOptions/ImageOptions.vue')['default']
ImageUploader: typeof import('./src/components/Controls/ImageUploader.vue')['default']
ImageUploadInput: typeof import('./src/components/ImageUploadInput.vue')['default']
InlineInput: typeof import('./src/components/Controls/InlineInput.vue')['default']
@@ -76,17 +94,20 @@ declare module 'vue' {
JavaScript: typeof import('./src/components/Icons/JavaScript.vue')['default']
Layers: typeof import('./src/components/Icons/Layers.vue')['default']
Loading: typeof import('./src/components/Icons/Loading.vue')['default']
- LucideCalendar: typeof import('~icons/lucide/calendar')['default']
MainMenu: typeof import('./src/components/MainMenu.vue')['default']
MarginHandler: typeof import('./src/components/MarginHandler.vue')['default']
- Meta: typeof import('./src/components/Icons/Meta.vue')['default']
+ MiddleTruncate: typeof import('./src/components/MiddleTruncate.vue')['default']
+ MoreStylesPanel: typeof import('./src/components/MoreStylesPanel.vue')['default']
NewBlockTemplate: typeof import('./src/components/Modals/NewBlockTemplate.vue')['default']
- NewBuilderVariable: typeof import('./src/components/Modals/NewBuilderVariable.vue')['default']
- NewComponent: typeof import('./src/components/Modals/NewComponent.vue')['default']
- NewFolder: typeof import('./src/components/Modals/NewFolder.vue')['default']
+ NewBuilderToken: typeof import('./src/components/Modals/NewBuilderToken.vue')['default']
+ NumberArrows: typeof import('./src/components/Controls/NumberArrows.vue')['default']
+ NumberOptions: typeof import('./src/components/PropsOptions/NumberOptions.vue')['default']
ObjectEditor: typeof import('./src/components/ObjectEditor.vue')['default']
+ ObjectInput: typeof import('./src/components/ObjectInput.vue')['default']
+ ObjectOptions: typeof import('./src/components/PropsOptions/ObjectOptions.vue')['default']
OptionToggle: typeof import('./src/components/Controls/OptionToggle.vue')['default']
PaddingHandler: typeof import('./src/components/PaddingHandler.vue')['default']
+ PageActionsDropdown: typeof import('./src/components/PageActionsDropdown.vue')['default']
PageAnalytics: typeof import('./src/components/Settings/PageAnalytics.vue')['default']
PageCard: typeof import('./src/components/PageCard.vue')['default']
PageClientScriptManager: typeof import('./src/components/PageClientScriptManager.vue')['default']
@@ -96,30 +117,46 @@ declare module 'vue' {
PageListModal: typeof import('./src/components/Modals/PageListModal.vue')['default']
PageMeta: typeof import('./src/components/Settings/PageMeta.vue')['default']
PageOptions: typeof import('./src/components/PageOptions.vue')['default']
- PagePreviewCard: typeof import('./src/components/PagePreviewCard.vue')['default']
PageRobots: typeof import('./src/components/Settings/PageRobots.vue')['default']
PageScript: typeof import('./src/components/PageScript.vue')['default']
PanelResizer: typeof import('./src/components/PanelResizer.vue')['default']
PlacementControl: typeof import('./src/components/PlacementControl.vue')['default']
Play: typeof import('./src/components/Icons/Play.vue')['default']
- Plus: typeof import('./src/components/Icons/Plus.vue')['default']
- PropertyControl: typeof import('./src/components/Controls/PropertyControl.vue')['default']
+ PropertyControlInput: typeof import('./src/components/Controls/PropertyControlInput.vue')['default']
+ PropertyLabel: typeof import('./src/components/Controls/PropertyLabel.vue')['default']
+ PropsEditor: typeof import('./src/components/PropsEditor.vue')['default']
+ PropsPopoverContent: typeof import('./src/components/PropsPopoverContent.vue')['default']
PublishButton: typeof import('./src/components/PublishButton.vue')['default']
RangeInput: typeof import('./src/components/Controls/RangeInput.vue')['default']
- Redirect: typeof import('./src/components/Icons/Redirect.vue')['default']
- Reset: typeof import('./src/components/Reset.vue')['default']
+ RotationHandler: typeof import('./src/components/RotationHandler.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
+ RouteTreeNode: typeof import('./src/components/RouteTreeNode.vue')['default']
+ RouteTreeView: typeof import('./src/components/RouteTreeView.vue')['default']
SearchBlock: typeof import('./src/components/Controls/SearchBlock.vue')['default']
- SelectFolder: typeof import('./src/components/Modals/SelectFolder.vue')['default']
- Settings: typeof import('./src/components/Icons/Settings.vue')['default']
+ SelectOptions: typeof import('./src/components/PropsOptions/SelectOptions.vue')['default']
SettingsGear: typeof import('./src/components/Icons/SettingsGear.vue')['default']
- StrikeThrough: typeof import('./src/components/Icons/StrikeThrough.vue')['default']
- Switch: typeof import('./src/components/Controls/Switch.vue')['default']
- TabButtons: typeof import('./src/components/Controls/TabButtons.vue')['default']
- TemplatePagePreview: typeof import('./src/components/TemplatePagePreview.vue')['default']
- TemplateSelector: typeof import('./src/components/TemplateSelector.vue')['default']
+ ShadowHandler: typeof import('./src/components/ShadowHandler.vue')['default']
+ SplitInput: typeof import('./src/components/Controls/SplitInput.vue')['default']
+ SplitModeInput: typeof import('./src/components/Controls/SplitModeInput.vue')['default']
+ SplitPropertyControl: typeof import('./src/components/Controls/SplitPropertyControl.vue')['default']
+ StringOptions: typeof import('./src/components/PropsOptions/StringOptions.vue')['default']
+ StylePropertyControl: typeof import('./src/components/Controls/StylePropertyControl.vue')['default']
+ TemplateGallery: typeof import('./src/components/Templates/TemplateGallery.vue')['default']
+ TemplateGroupCard: typeof import('./src/components/Templates/TemplateGroupCard.vue')['default']
+ TemplatePageCard: typeof import('./src/components/Templates/TemplatePageCard.vue')['default']
+ TemplatePageGrid: typeof import('./src/components/Templates/TemplatePageGrid.vue')['default']
+ TemplatePreview: typeof import('./src/components/Templates/TemplatePreview.vue')['default']
+ TemplatesDialog: typeof import('./src/components/Templates/TemplatesDialog.vue')['default']
TextBlock: typeof import('./src/components/TextBlock.vue')['default']
- VariableManager: typeof import('./src/components/Modals/VariableManager.vue')['default']
+ TextBlockBubbleMenu: typeof import('./src/components/TextBlockBubbleMenu.vue')['default']
+ TokenManager: typeof import('./src/components/Modals/TokenManager.vue')['default']
+ TopClicksList: typeof import('./src/components/Settings/TopClicksList.vue')['default']
+ TopReferrersList: typeof import('./src/components/Settings/TopReferrersList.vue')['default']
+ TrackingDisabledNotice: typeof import('./src/components/Settings/TrackingDisabledNotice.vue')['default']
+ VariantControl: typeof import('./src/components/Controls/VariantControl.vue')['default']
+ VersionHistory: typeof import('./src/components/VersionHistory.vue')['default']
+ VisibilityInput: typeof import('./src/components/VisibilityInput.vue')['default']
+ WebPagePresetPicker: typeof import('./src/components/WebPagePresetPicker.vue')['default']
}
}
diff --git a/frontend/index.html b/frontend/index.html
index ff179096f..2d24cb142 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,22 +2,23 @@
-
-
+
+
+{{ _("Page not found") }}
+ +
+
+
+
+
+ {{ progressMessage || (mode === "modify" ? "Modifying section…" : "Generating page…") }}
+
+
+
+
+
+
diff --git a/frontend/src/components/ArrayInput.vue b/frontend/src/components/ArrayInput.vue
new file mode 100644
index 000000000..112cfd0bf
--- /dev/null
+++ b/frontend/src/components/ArrayInput.vue
@@ -0,0 +1,63 @@
+
+
+
+
+ + +
+
+
+
+
+
+
+ {{ label }}
+
+
+
+
+
+
+
+
+ Array Items:
+
-
+
-
+ :getModelValue="() => getDisplayValue(null)"
+ :getVariantValue="(v: string) => getDisplayValue(v)"
+ :setVariantValue="handleSetVariant"
+ :setModelValue="(val: string) => setBGValue(val)">
+
+ class="absolute left-2 top-[6px] size-4 cursor-pointer rounded shadow-md"
+ @click="
+ () => {
+ activeState = variant;
+ togglePopover();
+ }
+ "
+ :class="{ 'bg-surface-gray-4': !getHasBackground(variant) }"
+ :style="getPreviewStyle(variant)" />
-
+
-
-
-
-
-
-
-
+
+
diff --git a/frontend/src/components/BlockPositionHandler.vue b/frontend/src/components/BlockPositionHandler.vue
index eba26622e..6d4aa1460 100644
--- a/frontend/src/components/BlockPositionHandler.vue
+++ b/frontend/src/components/BlockPositionHandler.vue
@@ -1,26 +1,27 @@
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
-
- {{ serveLocallyButtonText }}
-
-
- Clear Image
-
-
+
+
+
+ Clip Background to Text
+
-
@@ -80,6 +111,7 @@
:ref="childLayer"
:is-parent-hidden="isParentHidden || !element.isVisible()"
:indent="childIndent"
+ :readonly="readonly"
:disable-draggable="
Boolean(element.children.length && element.children[0].isChildOfComponentBlock())
" />
@@ -87,23 +119,29 @@
+
+
- , prefix = "") {
+ const componentDataCollectionObject = getRepeaterScopedData(
+ blockController.getFirstSelectedBlock(),
+ componentData,
+ );
+
+ const isInsideRepeater = blockController.getFirstSelectedBlock()?.isInsideRepeater();
+ const repeaterDataKeyComesFrom: BlockDataKey["comesFrom"] | undefined = blockController
+ .getFirstSelectedBlock()
+ ?.getRepeaterParent()
+ ?.getDataKey("comesFrom") as BlockDataKey["comesFrom"] | undefined;
+
+ function processObject(obj: Record, prefix = "", resultArray: string[] = []) {
if (!obj || typeof obj !== "object") {
return;
}
@@ -26,18 +45,52 @@ const keyOptions = computed(() => {
const path = prefix ? `${prefix}.${key}` : key;
if (Array.isArray(value)) {
- result.push(path);
+ resultArray.push(path);
} else if (typeof value === "object" && value !== null) {
- processObject(value, path);
+ processObject(value, path, resultArray);
}
});
}
- processObject(collectionObject);
- return result.map((key) => ({
- label: key,
- value: key,
- }));
+ processObject(pageDataCollectionObject, "", repeatablePageDataKeys);
+ processObject(componentDataCollectionObject, "", repeatableComponentDataKeys);
+
+ const isPropsBasedRepeater = isInsideRepeater && repeaterDataKeyComesFrom == "props";
+ const repeatableProps: string[] = [];
+
+ const propsOfComponentRoot = blockController.getFirstSelectedBlock()?.getComponentRoot()?.getBlockProps();
+
+ if (propsOfComponentRoot && !isPropsBasedRepeater) {
+ Object.entries(propsOfComponentRoot).forEach(([key, value]) => {
+ if (value.isStandard && (value.propOptions?.type == "array" || value.propOptions?.type == "object")) {
+ repeatableProps.push(key);
+ }
+ });
+ }
+
+ repeatablePageDataKeys.forEach((item) => {
+ result.push({
+ label: item,
+ value: `${item}--dataScript`,
+ prefix: h("span", { class: "lucide-zap size-3", "aria-hidden": "true" }),
+ });
+ });
+ repeatableComponentDataKeys.forEach((item) => {
+ result.push({
+ label: item,
+ value: `${item}--componentData`,
+ prefix: h("span", { class: "lucide-zap size-3", "aria-hidden": "true" }),
+ });
+ });
+ repeatableProps.forEach((prop) => {
+ result.push({
+ label: prop,
+ value: `${prop}--props`,
+ prefix: h("span", { class: "lucide-git-commit size-3", "aria-hidden": "true" }),
+ });
+ });
+
+ return result;
});
const collectionOptions = [
@@ -53,8 +106,15 @@ const collectionOptions = [
},
searchKeyWords: "Collection, Repeater, Dynamic Collection, Dynamic Repeater",
events: {
- "update:modelValue": (selectedOption: { label: string; value: string }) => {
- blockController.setDataKey("key", selectedOption?.value);
+ "update:modelValue": (selectedOption: string) => {
+ if (!selectedOption) {
+ blockController.setDataKey("key", null);
+ return;
+ }
+ let value = selectedOption.split("--").slice(0, -1).join("--");
+ let comesFrom = selectedOption.split("--").slice(-1)[0] as BlockDataKey["comesFrom"];
+ blockController.setDataKey("key", value);
+ blockController.setDataKey("comesFrom", comesFrom);
},
},
},
diff --git a/frontend/src/components/BlockPropertySections/CustomAttributesSection.ts b/frontend/src/components/BlockPropertySections/CustomAttributesSection.ts
index d1744f1b2..ccd69a5fc 100644
--- a/frontend/src/components/BlockPropertySections/CustomAttributesSection.ts
+++ b/frontend/src/components/BlockPropertySections/CustomAttributesSection.ts
@@ -8,6 +8,7 @@ const customAttributesSectionProperties = [
getProps: () => {
return {
obj: blockController.getCustomAttributes() as Record,
+ allowDynamicValues: true,
};
},
searchKeyWords: "Attributes, CustomAttributes, Custom Attributes, HTML Attributes, Data Attributes",
diff --git a/frontend/src/components/BlockPropertySections/DimenstionSection.ts b/frontend/src/components/BlockPropertySections/DimensionSection.ts
similarity index 100%
rename from frontend/src/components/BlockPropertySections/DimenstionSection.ts
rename to frontend/src/components/BlockPropertySections/DimensionSection.ts
diff --git a/frontend/src/components/BlockPropertySections/EditorConfigSection.ts b/frontend/src/components/BlockPropertySections/EditorConfigSection.ts
new file mode 100644
index 000000000..d1a92a8eb
--- /dev/null
+++ b/frontend/src/components/BlockPropertySections/EditorConfigSection.ts
@@ -0,0 +1,63 @@
+import BasePropertyControl from "@/components/Controls/BasePropertyControl.vue";
+import InlineInput from "@/components/Controls/InlineInput.vue";
+import OptionToggle from "@/components/Controls/OptionToggle.vue";
+import useCanvasStore from "@/stores/canvasStore";
+import blockController from "@/utils/blockController";
+
+const getEditorConfig = (): BlockEditorConfig => {
+ return blockController.getFirstSelectedBlock()?.editorConfig || {};
+};
+
+const setEditorConfig = (patch: Partial) => {
+ const block = blockController.getFirstSelectedBlock();
+ if (!block) return;
+ block.editorConfig = { ...block.editorConfig, ...patch };
+};
+
+const editorConfigSectionProperties = [
+ {
+ component: InlineInput,
+ getProps: () => ({
+ label: "Layer Icon",
+ modelValue: getEditorConfig().icon || "",
+ placeholder: "e.g. play-circle",
+ }),
+ events: {
+ "update:modelValue": (val: string) => setEditorConfig({ icon: val || undefined }),
+ },
+ searchKeyWords: "Editor, Config, Icon, Layer Icon, EditorConfig",
+ },
+ {
+ component: BasePropertyControl,
+ getProps: () => ({
+ propertyKey: "showChildrenInEditor",
+ label: "Show Children",
+ component: OptionToggle,
+ enableStates: false,
+ options: [
+ { label: "Show", value: true },
+ { label: "Hide", value: false },
+ ],
+ getModelValue: () => {
+ const val = getEditorConfig().showChildrenInEditor;
+ return val === false ? false : true;
+ },
+ setModelValue: (val: boolean) => setEditorConfig({ showChildrenInEditor: val }),
+ }),
+ searchKeyWords: "Editor, Config, Show Children, showChildrenInEditor, Layers, EditorConfig",
+ },
+];
+
+export default {
+ name: "Editor Config",
+ properties: editorConfigSectionProperties,
+ collapsed: true,
+ condition: () => {
+ const canvasStore = useCanvasStore();
+ return (
+ !blockController.multipleBlocksSelected() &&
+ canvasStore.editingMode === "fragment" &&
+ window.is_developer_mode
+ );
+ },
+};
diff --git a/frontend/src/components/BlockPropertySections/HTMLOptionsSection.ts b/frontend/src/components/BlockPropertySections/HTMLOptionsSection.ts
index efbcc9786..f7cbbc12e 100644
--- a/frontend/src/components/BlockPropertySections/HTMLOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/HTMLOptionsSection.ts
@@ -1,11 +1,11 @@
import CodeEditor from "@/components/Controls/CodeEditor.vue";
import blockController from "@/utils/blockController";
import useCanvasStore from "../../stores/canvasStore";
-import PropertyControl from "../Controls/PropertyControl.vue";
+import BasePropertyControl from "../Controls/BasePropertyControl.vue";
const HTMLOptionsSectionProperties = [
{
- component: PropertyControl,
+ component: BasePropertyControl,
getProps: () => {
return {
component: CodeEditor,
@@ -14,14 +14,14 @@ const HTMLOptionsSectionProperties = [
autofocus: false,
height: "60px",
controlType: "key",
- styleProperty: "innerHTML",
+ propertyKey: "innerHTML",
labelPlacement: "top",
getModelValue: () => blockController.getInnerHTML() || "",
setModelValue: (val: string) => blockController.setInnerHTML(val),
allowDynamicValue: true,
actionButton: {
label: "Expand",
- icon: "maximize-2",
+ icon: "lucide-maximize-2",
handler: () => {
useCanvasStore().editHTML(blockController.getSelectedBlocks()[0]);
},
diff --git a/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts b/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts
index 127aab5ae..1b3420994 100644
--- a/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts
@@ -1,4 +1,4 @@
-import PropertyControl from "@/components/Controls/PropertyControl.vue";
+import AttributePropertyControl from "@/components/Controls/AttributePropertyControl.vue";
import ImageUploadInput from "@/components/ImageUploadInput.vue";
import blockController from "@/utils/blockController";
import { getOptimizeButtonText, optimizeImage, shouldShowOptimizeButton } from "@/utils/imageUtils";
@@ -7,23 +7,25 @@ import { computed } from "vue";
const imageOptionsSectionProperties = [
{
- component: PropertyControl,
+ component: AttributePropertyControl,
getProps: () => {
return {
component: ImageUploadInput,
- controlType: "attribute",
- styleProperty: "src",
+ propertyKey: "src",
label: "Image URL",
allowDynamicValue: true,
- imageURL: blockController.getAttribute("src"),
+ popoverOffset: 120,
imageFit: blockController.getStyle("objectFit"),
+ variants: [{ name: "dark", property: "darkSrc", label: "Dark Mode" }],
};
},
events: {
"update:imageURL": (val: string) => blockController.setAttribute("src", val),
"update:imageFit": (val: StyleValue) => blockController.setStyle("objectFit", val),
},
- searchKeyWords: "Image, URL, Src, Fit, ObjectFit, Object Fit, Fill, Contain, Cover",
+ searchKeyWords:
+ "Image, URL, Src, Fit, ObjectFit, Object Fit, Fill, Contain, Cover, Dark, Mode, Dark Mode, Theme",
+ usedStyleProperties: ["object-fit"],
},
{
component: Button,
@@ -61,11 +63,10 @@ const imageOptionsSectionProperties = [
},
},
{
- component: PropertyControl,
+ component: AttributePropertyControl,
getProps: () => {
return {
- controlType: "attribute",
- styleProperty: "alt",
+ propertyKey: "alt",
label: "Alt Text",
allowDynamicValue: true,
getModelValue: () => blockController.getAttribute("alt") || "",
diff --git a/frontend/src/components/BlockPropertySections/InputOptionsSection.ts b/frontend/src/components/BlockPropertySections/InputOptionsSection.ts
new file mode 100644
index 000000000..caab6a6ee
--- /dev/null
+++ b/frontend/src/components/BlockPropertySections/InputOptionsSection.ts
@@ -0,0 +1,100 @@
+import InlineInput from "@/components/Controls/InlineInput.vue";
+import OptionToggle from "@/components/Controls/OptionToggle.vue";
+import blockController from "@/utils/blockController";
+
+const inputOptionsSectionProperties = [
+ {
+ component: InlineInput,
+ getProps: () => {
+ return {
+ label: "Type",
+ type: "select",
+ options: ["text", "number", "email", "password", "date", "time", "search", "tel", "url", "color", "radio"],
+ modelValue: blockController.getAttribute("type") || "text",
+ };
+ },
+ searchKeyWords:
+ "Input, Type, InputType, Input Type, Text, Number, Email, Password, Date, Time, Search, Tel, Url, Color, Radio, tag",
+ events: {
+ "update:modelValue": (val: string) => blockController.setAttribute("type", val),
+ },
+ },
+ {
+ component: InlineInput,
+ getProps: () => {
+ return {
+ label: "Placeholder",
+ modelValue: blockController.getAttribute("placeholder"),
+ };
+ },
+ searchKeyWords:
+ "Placeholder, Input, PlaceholderText, Placeholder Text, form, input, text, number, email, password, date, time, search, tel, url, color, tag",
+ events: {
+ "update:modelValue": (val: string) => blockController.setAttribute("placeholder", val),
+ },
+ },
+ // Radio button specific properties
+ {
+ component: InlineInput,
+ getProps: () => {
+ return {
+ label: "Name",
+ modelValue: blockController.getAttribute("name") || "",
+ description:
+ "Group name for this radio button. Radio buttons with the same name are grouped together.",
+ };
+ },
+ searchKeyWords: "Radio, Name, Group, RadioName, Radio Name, Group Name, input, radio button",
+ events: {
+ "update:modelValue": (val: string) => blockController.setAttribute("name", val),
+ },
+ condition: () => blockController.getAttribute("type") === "radio",
+ },
+ {
+ component: InlineInput,
+ getProps: () => {
+ return {
+ label: "Value",
+ modelValue: blockController.getAttribute("value") || "",
+ description: "Value submitted with the form when this radio button is selected.",
+ };
+ },
+ searchKeyWords: "Radio, Value, RadioValue, Radio Value, input, radio button",
+ events: {
+ "update:modelValue": (val: string) => blockController.setAttribute("value", val),
+ },
+ condition: () => blockController.getAttribute("type") === "radio",
+ },
+ {
+ component: OptionToggle,
+ getProps: () => {
+ return {
+ label: "Checked",
+ options: [
+ { label: "Yes", value: true },
+ { label: "No", value: false },
+ ],
+ modelValue:
+ blockController.getAttribute("checked") === "" || blockController.getAttribute("checked") === "checked",
+ };
+ },
+ searchKeyWords: "Checked, Radio, DefaultValue, Default Value, Selected, Initially Checked",
+ events: {
+ "update:modelValue": (val: boolean) => {
+ if (val) {
+ blockController.setAttribute("checked", "checked");
+ } else {
+ blockController.removeAttribute("checked");
+ }
+ },
+ },
+ condition: () => blockController.getAttribute("type") === "radio",
+ },
+];
+
+export default {
+ name: "Input Options",
+ properties: inputOptionsSectionProperties,
+ condition: () => blockController.isInput(),
+};
+
diff --git a/frontend/src/components/BlockPropertySections/LayoutSection.ts b/frontend/src/components/BlockPropertySections/LayoutSection.ts
index 0d8b7a419..a13368511 100644
--- a/frontend/src/components/BlockPropertySections/LayoutSection.ts
+++ b/frontend/src/components/BlockPropertySections/LayoutSection.ts
@@ -2,15 +2,36 @@ import BlockFlexLayoutHandler from "@/components/BlockFlexLayoutHandler.vue";
import BlockGridLayoutHandler from "@/components/BlockGridLayoutHandler.vue";
import OptionToggle from "@/components/Controls/OptionToggle.vue";
import blockController from "@/utils/blockController";
-import PropertyControl from "../Controls/PropertyControl.vue";
+import { collapseGapShorthand, expandGapShorthand } from "@/utils/cssUtils";
+import StylePropertyControl from "../Controls/StylePropertyControl.vue";
+
+const SPLITS = ["V", "H"];
+
+const gapProps = {
+ label: "Gap",
+ propertyKey: "gap",
+ splits: SPLITS,
+ toControlValues: (value: unknown) => expandGapShorthand(value),
+ toModelValue: (parts: StyleValue[]) => collapseGapShorthand(parts),
+ getModelValue: (state: string | null = null) =>
+ state
+ ? String(blockController.getNativeStyle(`${state}:gap`) ?? "")
+ : String(blockController.getSpacing("gap", { nativeOnly: true, cascading: false })),
+ getPlaceholder: () =>
+ String(blockController.getSpacing("gap", { nativeOnly: false, cascading: true })),
+ setModelValue: (value: string | boolean | number) => {
+ if (typeof value === "boolean") return;
+ blockController.setSpacing("gap", String(value));
+ },
+};
const layoutSectionProperties = [
{
- component: PropertyControl,
+ component: StylePropertyControl,
condition: () => !blockController.isText(),
getProps: () => {
return {
- styleProperty: "display",
+ propertyKey: "display",
component: OptionToggle,
label: "Type",
enableStates: false,
@@ -48,15 +69,55 @@ const layoutSectionProperties = [
},
{
component: BlockGridLayoutHandler,
- getProps: () => {},
+ condition: () => blockController.isGrid() || Boolean(blockController.getParentBlock()?.isGrid()),
+ getProps: () => ({ gapProps }),
+ usedStyleProperties: [
+ "column-gap",
+ "gap",
+ "grid-auto-columns",
+ "grid-auto-flow",
+ "grid-auto-rows",
+ "grid-column",
+ "grid-column-end",
+ "grid-column-start",
+ "grid-row",
+ "grid-row-end",
+ "grid-row-start",
+ "grid-template",
+ "grid-template-areas",
+ "grid-template-columns",
+ "grid-template-rows",
+ "justify-items",
+ "place-content",
+ "place-items",
+ "place-self",
+ "row-gap",
+ ],
searchKeyWords:
"Layout, Grid, GridTemplate, Grid Template, GridGap, Grid Gap, GridRow, Grid Row, GridColumn, Grid Column",
},
{
component: BlockFlexLayoutHandler,
- getProps: () => {},
+ condition: () => blockController.isFlex() || Boolean(blockController.getParentBlock()?.isFlex()),
+ getProps: () => ({ gapProps }),
+ usedStyleProperties: [
+ "align-content",
+ "align-items",
+ "align-self",
+ "flex",
+ "flex-basis",
+ "flex-direction",
+ "flex-flow",
+ "flex-grow",
+ "flex-shrink",
+ "flex-wrap",
+ "gap",
+ "justify-content",
+ "justify-self",
+ "order",
+ ],
searchKeyWords:
- "Layout, Flex, Flexbox, Flex Box, FlexBox, Justify, Space Between, Flex Grow, Flex Shrink, Flex Basis, Align Items, Align Content, Align Self, Flex Direction, Flex Wrap, Flex Flow, Flex Grow, Flex Shrink, Flex Basis, Gap",
+ "Layout, Flex, Flexbox, Flex Box, FlexBox, Justify, Space Between, Flex Grow, Flex Shrink, Flex Basis, Align Items, Align Content, Align Self, Flex Direction, Flex Wrap, Flex Flow, Flex Grow, Flex Shrink, Flex Basis, Gap, Order",
},
];
diff --git a/frontend/src/components/BlockPropertySections/LinkSection.ts b/frontend/src/components/BlockPropertySections/LinkSection.ts
index 21dc3a12c..409c6c2d3 100644
--- a/frontend/src/components/BlockPropertySections/LinkSection.ts
+++ b/frontend/src/components/BlockPropertySections/LinkSection.ts
@@ -1,17 +1,16 @@
+import AttributePropertyControl from "@/components/Controls/AttributePropertyControl.vue";
import blockController from "@/utils/blockController";
+import { Switch } from "frappe-ui";
import { computed } from "vue";
-import PropertyControl from "../Controls/PropertyControl.vue";
const linkSectionProperties = [
{
- component: PropertyControl,
+ component: AttributePropertyControl,
getProps: () => {
return {
label: "Link To",
- styleProperty: "href",
- enableStates: false,
+ propertyKey: "href",
allowDynamicValue: true,
- controlType: "attribute",
getModelValue: () => blockController.getAttribute("href"),
setModelValue: async (val: string) => {
if (val && !blockController.isLink()) {
@@ -40,13 +39,12 @@ const linkSectionProperties = [
},
},
{
- component: PropertyControl,
+ component: AttributePropertyControl,
getProps: () => {
return {
label: "Opens in",
- controlType: "attribute",
type: "select",
- styleProperty: "target",
+ propertyKey: "target",
allowDynamicValue: false,
getModelValue: () => blockController.getAttribute("target") || "_self",
setModelValue: (val: string) => {
@@ -71,6 +69,21 @@ const linkSectionProperties = [
searchKeyWords: "Link, Target, Opens in, OpensIn, Opens In, New Tab",
condition: () => blockController.getAttribute("href"),
},
+ {
+ component: Switch,
+ getProps: () => {
+ return {
+ label: "Track Clicks",
+ size: "sm",
+ class: "[&_label]:text-xs [&_label]:text-ink-gray-6 [&_label]:font-normal",
+ modelValue: blockController.isClickTrackingEnabled(),
+ };
+ },
+ searchKeyWords: "Track, Clicks, Tracking, Analytics, CTR, Click Tracking",
+ events: {
+ "update:modelValue": (val: boolean) => blockController.toggleClickTracking(val),
+ },
+ },
];
export default {
@@ -80,5 +93,5 @@ export default {
condition: () =>
!blockController.multipleBlocksSelected() &&
!blockController.getSelectedBlocks()[0].parentBlock?.isLink() &&
- !blockController.isHTML(),
+ !(blockController.isHTML() && !blockController.isSVG()),
};
diff --git a/frontend/src/components/BlockPropertySections/MoreStylesSection.ts b/frontend/src/components/BlockPropertySections/MoreStylesSection.ts
new file mode 100644
index 000000000..8d5bc3036
--- /dev/null
+++ b/frontend/src/components/BlockPropertySections/MoreStylesSection.ts
@@ -0,0 +1,23 @@
+import MoreStylesPanel from "@/components/MoreStylesPanel.vue";
+import blockController from "@/utils/blockController";
+import { getStylePropertiesWithoutControls } from "@/utils/stylePropertiesWithControls";
+import { computed } from "vue";
+
+const moreStylesSectionProperties = [
+ {
+ component: MoreStylesPanel,
+ searchKeyWords: "More, Styles, CSS, Property, Properties, Advanced",
+ },
+];
+
+export default {
+ name: "More Styles",
+ properties: moreStylesSectionProperties,
+ collapsed: computed(() => {
+ const block = blockController.getFirstSelectedBlock();
+ if (!block) return true;
+ const styles = { ...block.baseStyles, ...block.tabletStyles, ...block.mobileStyles };
+ return getStylePropertiesWithoutControls(styles).size === 0;
+ }),
+ condition: () => blockController.getSelectedBlocks().length === 1
+};
diff --git a/frontend/src/components/BlockPropertySections/OptionsSection.ts b/frontend/src/components/BlockPropertySections/OptionsSection.ts
index cd82ca086..b6b8fdbcc 100644
--- a/frontend/src/components/BlockPropertySections/OptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/OptionsSection.ts
@@ -1,7 +1,6 @@
-import CodeEditor from "@/components/Controls/CodeEditor.vue";
import InlineInput from "@/components/Controls/InlineInput.vue";
+import VisibilityInput from "@/components/VisibilityInput.vue";
import blockController from "@/utils/blockController";
-import PropertyControl from "../Controls/PropertyControl.vue";
const setClasses = (val: string) => {
const classes = val.split(",").map((c) => c.trim());
@@ -9,77 +8,6 @@ const setClasses = (val: string) => {
};
const optionsSectionProperties = [
- {
- component: InlineInput,
- getProps: () => {
- return {
- label: "Tag",
- type: "select",
- options: [
- "aside",
- "article",
- "span",
- "div",
- "section",
- "button",
- "p",
- "a",
- "input",
- "hr",
- "form",
- "textarea",
- "nav",
- "header",
- "footer",
- "label",
- "select",
- "option",
- "blockquote",
- "cite",
- "canvas",
- ],
- modelValue: blockController.getKeyValue("element"),
- };
- },
- searchKeyWords:
- "Tag, Element, TagName, Tag Name, ElementName, Element Name, header, footer, nav, input, form, textarea, button, p, a, div, span, section, hr, TagType, Tag Type, ElementType, Element Type",
- events: {
- "update:modelValue": (val: string) => blockController.setKeyValue("element", val),
- },
- condition: () => !blockController.isRoot(),
- },
- {
- component: InlineInput,
- getProps: () => {
- return {
- label: "Input Type",
- type: "select",
- options: ["text", "number", "email", "password", "date", "time", "search", "tel", "url", "color"],
- modelValue: blockController.getAttribute("type") || "text",
- };
- },
- searchKeyWords:
- "Input, Type, InputType, Input Type, Text, Number, Email, Password, Date, Time, Search, Tel, Url, Color, tag",
- events: {
- "update:modelValue": (val: string) => blockController.setAttribute("type", val),
- },
- condition: () => blockController.isInput(),
- },
- {
- component: InlineInput,
- getProps: () => {
- return {
- label: "Placeholder",
- modelValue: blockController.getAttribute("placeholder"),
- };
- },
- searchKeyWords:
- "Placeholder, Input, PlaceholderText, Placeholder Text, form, input, text, number, email, password, date, time, search, tel, url, color, tag",
- events: {
- "update:modelValue": (val: string) => blockController.setAttribute("placeholder", val),
- },
- condition: () => blockController.isInput(),
- },
{
component: InlineInput,
getProps: () => {
@@ -95,20 +23,21 @@ const optionsSectionProperties = [
condition: () => !blockController.multipleBlocksSelected(),
},
{
- component: InlineInput,
+ component: VisibilityInput,
getProps: () => {
return {
label: "Condition",
- modelValue: blockController.getKeyValue("visibilityCondition"),
+ property: "visibilityCondition",
+ getModelValue: () => (blockController.getKeyValue("visibilityCondition") as BlockVisibilityCondition).key,
+ setModelValue: (val: BlockVisibilityCondition) => {
+ blockController.setKeyValue("visibilityCondition", val);
+ },
description:
"Visibility condition to show/hide the block based on a condition. Pass a boolean variable created in your Data Script.
Note: This is only evaluated in the preview mode.", }; }, searchKeyWords: "Condition, Visibility, VisibilityCondition, Visibility Condition, show, hide, display, hideIf, showIf", - events: { - "update:modelValue": (val: string) => blockController.setKeyValue("visibilityCondition", val), - }, condition: () => !blockController.isRoot(), }, ]; diff --git a/frontend/src/components/BlockPropertySections/PositionSection.ts b/frontend/src/components/BlockPropertySections/PositionSection.ts index 40bc75662..49233ad49 100644 --- a/frontend/src/components/BlockPropertySections/PositionSection.ts +++ b/frontend/src/components/BlockPropertySections/PositionSection.ts @@ -8,6 +8,7 @@ const positionSectionProperties = [ searchKeyWords: "Position, Top, Right, Bottom, Left, PositionTop, Position Top, PositionRight, Position Right, PositionBottom, Position Bottom, PositionLeft, Position Left, Free, Fixed, Absolute, Relative, Sticky", getProps: () => {}, + usedStyleProperties: ["bottom", "left", "position", "right", "top"], }, ]; diff --git a/frontend/src/components/BlockPropertySections/RawStyleSection.ts b/frontend/src/components/BlockPropertySections/RawStyleSection.ts deleted file mode 100644 index 755910211..000000000 --- a/frontend/src/components/BlockPropertySections/RawStyleSection.ts +++ /dev/null @@ -1,38 +0,0 @@ -import ObjectEditor from "@/components/ObjectEditor.vue"; -import blockController from "@/utils/blockController"; -import { computed } from "vue"; - -const rawStyleSectionProperties = [ - { - component: ObjectEditor, - getProps: () => { - return { - obj: blockController.getRawStyles() as Record,
- description: `
- Note:
-
-
- • Raw styles get applied across all devices -
- • State based styles are supported (e.g. hover, focus, visited) -
- Syntax: hover:color, focus:color, etc. -
- • State styles are only activated in preview mode - `, - }; - }, - searchKeyWords: "Raw, RawStyle, Raw Style, CSS, Style, Styles", - events: { - "update:obj": (obj: Record) => blockController.setRawStyles(obj),
- },
- },
-];
-
-export default {
- name: "Raw Style",
- properties: rawStyleSectionProperties,
- collapsed: computed(() => {
- return Object.keys(blockController.getRawStyles()).length === 0;
- }),
-};
diff --git a/frontend/src/components/BlockPropertySections/SpacingSection.ts b/frontend/src/components/BlockPropertySections/SpacingSection.ts
index 7f30f4ac5..1605ad592 100644
--- a/frontend/src/components/BlockPropertySections/SpacingSection.ts
+++ b/frontend/src/components/BlockPropertySections/SpacingSection.ts
@@ -1,52 +1,59 @@
+import SplitPropertyControl from "@/components/Controls/SplitPropertyControl.vue";
import blockController from "@/utils/blockController";
-import { computed } from "vue";
-import PropertyControl from "../Controls/PropertyControl.vue";
+
+const SPLITS = ["T", "R", "B", "L"];
const spacingSectionProperties = [
{
- component: PropertyControl,
+ component: SplitPropertyControl,
searchKeyWords: "Margin, Top, MarginTop, Margin Top",
getProps: () => {
return {
label: "Margin",
- getModelValue: () => blockController.getMargin({ nativeOnly: true }),
- getPlaceholder: () => blockController.getMargin({ cascading: true }),
- setModelValue: (val: string) => blockController.setMargin(val),
- styleProperty: "margin",
- enableSlider: true,
- unitOptions: ["px", "em", "rem"],
+ propertyKey: "margin",
+ splits: SPLITS,
+ inputAttrs: {},
+ getModelValue: (state: string | null = null) =>
+ state
+ ? String(blockController.getNativeStyle(`${state}:margin`) ?? "")
+ : String(blockController.getSpacing("margin", { nativeOnly: true, cascading: false })),
+ getPlaceholder: () =>
+ String(blockController.getSpacing("margin", { nativeOnly: false, cascading: true })),
+ setModelValue: (value: string | boolean | number) => {
+ if (typeof value === "boolean") return;
+ blockController.setSpacing("margin", String(value));
+ },
};
},
- events: {
- "update:modelValue": (val: string) => blockController.setMargin(val),
- },
+ usedStyleProperties: ["margin", "margin-bottom", "margin-left", "margin-right", "margin-top"],
condition: () => !blockController.isRoot(),
},
{
- component: PropertyControl,
+ component: SplitPropertyControl,
searchKeyWords: "Padding, Top, PaddingTop, Padding Top",
getProps: () => {
return {
label: "Padding",
- enableSlider: true,
- unitOptions: ["px", "em", "rem"],
- getModelValue: () => blockController.getPadding({ nativeOnly: true }),
- getPlaceholder: () => blockController.getPadding({ cascading: true }),
- setModelValue: (val: string) => blockController.setPadding(val),
- styleProperty: "padding",
+ propertyKey: "padding",
+ splits: SPLITS,
+ inputAttrs: { min: 0 },
+ getModelValue: (state: string | null = null) =>
+ state
+ ? String(blockController.getNativeStyle(`${state}:padding`) ?? "")
+ : String(blockController.getSpacing("padding", { nativeOnly: true, cascading: false })),
+ getPlaceholder: () =>
+ String(blockController.getSpacing("padding", { nativeOnly: false, cascading: true })),
+ setModelValue: (value: string | boolean | number) => {
+ if (typeof value === "boolean") return;
+ blockController.setSpacing("padding", String(value));
+ },
};
},
+ usedStyleProperties: ["padding", "padding-bottom", "padding-left", "padding-right", "padding-top"],
},
];
export default {
name: "Spacing",
properties: spacingSectionProperties,
- collapsed: computed(
- () =>
- !blockController.getStyle("marginTop") &&
- !blockController.getStyle("paddingTop") &&
- !blockController.getStyle("marginBottom") &&
- !blockController.getStyle("paddingBottom"),
- ),
};
diff --git a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
new file mode 100644
index 000000000..a280a887d
--- /dev/null
+++ b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
@@ -0,0 +1,152 @@
+import blockController from "@/utils/blockController";
+import ArrayInput from "../ArrayInput.vue";
+import BasePropertyControl from "../Controls/BasePropertyControl.vue";
+import ColorInput from "../Controls/ColorInput.vue";
+import OptionToggle from "../Controls/OptionToggle.vue";
+import ImageUploadInput from "../ImageUploadInput.vue";
+import ObjectInput from "../ObjectInput.vue";
+import useCanvasStore from "@/stores/canvasStore.js";
+
+const componentMap = {
+ array: ArrayInput,
+ object: ObjectInput,
+};
+
+const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
+ const type = propDetails.propOptions?.type || "string";
+ let map = {};
+ switch (type) {
+ case "boolean":
+ map = {
+ component: OptionToggle,
+ options: [
+ { label: propDetails.propOptions?.options?.trueLabel || "True", value: true },
+ { label: propDetails.propOptions?.options?.falseLabel || "False", value: false },
+ ],
+ };
+ break;
+ case "select":
+ map = {
+ type: "select",
+ options:
+ propDetails.propOptions?.options?.options?.map((item: any) => ({
+ label: item,
+ value: item,
+ })) || [],
+ };
+ break;
+ case "image":
+ map = {
+ component: ImageUploadInput,
+ imageURL: blockController.getBlockProps()[propName].value as string,
+ imageFit:
+ propDetails.propOptions?.options?.imageFit ||
+ (propDetails.propOptions?.options?.defaultImageFit as StyleValue),
+ };
+ break;
+ case "color":
+ map = {
+ component: ColorInput,
+ };
+ break;
+ }
+ map = {
+ label: propDetails.label || propName,
+ enableStates: false,
+ allowDynamicValue: true,
+ dynamicValueFilterOptions: {
+ excludeOwnProps: true,
+ },
+ getDynamicValue: () => {
+ if (propDetails.isDynamic) {
+ return {
+ key: propDetails.value,
+ comesFrom: propDetails.comesFrom,
+ };
+ }
+ },
+ setDynamicValue: (key: string | null, comesFrom: BlockProps[string]["comesFrom"]) => {
+ blockController.setBlockProp(propName, {
+ value: key || "",
+ isDynamic: !!key,
+ comesFrom: key ? comesFrom : null,
+ });
+ },
+ setModelValue: (value: any) => {
+ if (value === "") value = null;
+ blockController.setBlockProp(propName, { value });
+ },
+ getModelValue: () => {
+ const value = blockController.getFirstSelectedBlock().getBlockProps()[propName]?.value;
+ return value;
+ },
+ getPlaceholder: () => {
+ return propDetails.propOptions?.options?.defaultValue || null;
+ },
+ defaultValue:
+ type == "boolean"
+ ? propDetails.propOptions?.options?.defaultValue == "true"
+ : propDetails.propOptions?.options?.defaultValue,
+ ...map,
+ };
+ return map;
+};
+
+const getEventsMap = (propName: string, propDetails: BlockProps[string]) => {
+ let events: Record = {};
+ const type = propDetails.propOptions?.type || "string";
+ switch (type) {
+ case "image":
+ events = {
+ "update:imageURL": (val: string) => blockController.setBlockProp(propName, { value: val }),
+ "update:imageFit": (val: StyleValue) =>
+ blockController.setBlockProp(propName, {
+ propOptions: { options: { ...propDetails.propOptions?.options, imageFit: val } },
+ }),
+ };
+ break;
+ }
+ return events;
+};
+
+const getStandardProps = (allProps: BlockProps) => {
+ const standardProps: BlockProps = {};
+ for (const [propKey, propDetails] of Object.entries(allProps || {})) {
+ if (propDetails.isStandard) {
+ standardProps[propKey] = propDetails;
+ }
+ }
+ return standardProps;
+};
+
+const getStandardPropsInputSection = () => {
+ const standardProps = getStandardProps(blockController.getBlockProps());
+ const sections = [];
+ for (const [propKey, propDetails] of Object.entries(standardProps)) {
+ const propType = propDetails.propOptions?.type;
+ const component =
+ (propType === "array" || propType === "object" ? componentMap[propType] : undefined) ||
+ BasePropertyControl;
+ const getProps = () => {
+ const props = getPropsMap(propKey, propDetails);
+ return props;
+ };
+ const events = getEventsMap(propKey, propDetails);
+ sections.push({
+ component,
+ getProps,
+ events,
+ searchKeyWords: [propKey, propDetails.label].join(", "),
+ });
+ }
+ return sections;
+};
+
+export default {
+ name: "Block Options",
+ properties: getStandardPropsInputSection,
+ collapsed: false,
+ condition: () =>
+ useCanvasStore().editingMode != "fragment" &&
+ Object.keys(getStandardProps(blockController.getBlockProps())).length > 0,
+};
diff --git a/frontend/src/components/BlockPropertySections/StyleSection.ts b/frontend/src/components/BlockPropertySections/StyleSection.ts
index 437b381d8..1c4c04b94 100644
--- a/frontend/src/components/BlockPropertySections/StyleSection.ts
+++ b/frontend/src/components/BlockPropertySections/StyleSection.ts
@@ -1,9 +1,14 @@
import BackgroundHandler from "@/components/BackgroundHandler.vue";
import ColorInput from "@/components/Controls/ColorInput.vue";
+import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
import blockController from "@/utils/blockController";
-import { computed } from "vue";
-import PropertyControl from "../Controls/PropertyControl.vue";
+import { BORDER_UNIT_OPTIONS, RADIUS_UNIT_OPTIONS, ROTATION_UNIT_OPTIONS } from "@/utils/unitOptions";
import RangeInput from "../Controls/RangeInput.vue";
+import ShadowHandler from "@/components/ShadowHandler.vue";
+import SplitPropertyControl from "@/components/Controls/SplitPropertyControl.vue";
+
+const hasBorder = () =>
+ Boolean(blockController.getStyle("borderColor") || blockController.getStyle("borderWidth"));
const overflowOptions = [
{
@@ -30,11 +35,11 @@ const overflowOptions = [
const styleSectionProperties = [
{
- component: PropertyControl,
+ component: StylePropertyControl,
getProps: () => {
return {
label: "Opacity",
- styleProperty: "opacity",
+ propertyKey: "opacity",
enableSlider: false,
component: RangeInput,
getModelValue: () => {
@@ -51,67 +56,81 @@ const styleSectionProperties = [
{
component: BackgroundHandler,
getProps: () => {},
+ usedStyleProperties: [
+ "background",
+ "background-attachment",
+ "background-blend-mode",
+ "background-clip",
+ "background-color",
+ "background-image",
+ "background-origin",
+ "background-position",
+ "background-repeat",
+ "background-size",
+ ],
searchKeyWords:
"Background, BackgroundImage, Background Image, Background Position, Background Repeat, Background Size, BG, BGImage, BG Image, BGPosition, BG Position, BGRepeat, BG Repeat, BGSize, BG Size",
},
{
- component: PropertyControl,
+ component: StylePropertyControl,
getProps: () => {
return {
- styleProperty: "color",
+ propertyKey: "color",
component: ColorInput,
label: "Text Color",
- enableState: computed(() => {
- return !blockController.getFirstSelectedBlock()?.getEditor();
- }),
+ popoverOffset: 120,
};
},
searchKeyWords: "Text, Color, TextColor, Text Color",
},
{
- component: PropertyControl,
+ component: StylePropertyControl,
getProps: () => {
return {
- component: ColorInput,
- styleProperty: "borderColor",
label: "Border Color",
+ propertyKey: "borderColor",
+ component: ColorInput,
+ popoverOffset: 120,
+ events: {
+ // a border only shows up once it has a width and a style
+ "update:modelValue": (value: StyleValue) => {
+ if (!value) {
+ blockController.setStyle("borderWidth", null);
+ blockController.setStyle("borderStyle", null);
+ } else if (!blockController.getStyle("borderWidth")) {
+ blockController.setStyle("borderWidth", "1px");
+ blockController.setStyle("borderStyle", "solid");
+ }
+ },
+ },
};
},
+ usedStyleProperties: ["border", "border-color"],
searchKeyWords: "Border, Color, BorderColor, Border Color",
- events: {
- "update:modelValue": (val: StyleValue) => {
- if (val) {
- if (!blockController.getStyle("borderWidth")) {
- blockController.setStyle("borderWidth", "1px");
- blockController.setStyle("borderStyle", "solid");
- }
- } else {
- blockController.setStyle("borderWidth", null);
- blockController.setStyle("borderStyle", null);
- }
- },
- },
},
{
- component: PropertyControl,
+ component: SplitPropertyControl,
getProps: () => {
return {
label: "Border Width",
- styleProperty: "borderWidth",
- enableSlider: true,
- unitOptions: ["px", "%", "em", "rem"],
- minValue: 0,
+ propertyKey: "borderWidth",
+ unitOptions: BORDER_UNIT_OPTIONS,
+ splits: ["T", "R", "B", "L"],
+ toModelValue: (parts: StyleValue[]) => parts.join(" "),
+ getModelValue: (state: string | null = null) =>
+ String(blockController.getStyle(state ? `${state}:borderWidth` : "borderWidth") || ""),
};
},
+ usedStyleProperties: ["border-width"],
searchKeyWords: "Border, Width, BorderWidth, Border Width",
- condition: () => blockController.getStyle("borderColor") || blockController.getStyle("borderWidth"),
+ condition: () => hasBorder(),
},
{
- component: PropertyControl,
+ component: StylePropertyControl,
getProps: () => {
return {
label: "Border Style",
- styleProperty: "borderStyle",
+ propertyKey: "borderStyle",
type: "select",
options: [
{ value: "solid", label: "Solid" },
@@ -120,82 +139,67 @@ const styleSectionProperties = [
],
};
},
- searchKeyWords: "Border, Style, BorderStyle, Border Style, Solid, Dashed, Dotted",
- condition: () => blockController.getStyle("borderColor"),
+ usedStyleProperties: ["border-style"],
+ searchKeyWords: "Border, Style, BorderStyle, Border Style",
+ condition: () => hasBorder(),
},
{
- component: PropertyControl,
- getProps: () => {
- return {
- label: "Shadow",
- styleProperty: "boxShadow",
- type: "select",
- options: [
- { value: null, label: "None" },
- {
- label: "Small",
- value: "rgba(0, 0, 0, 0.05) 0px 1px 2px 0px, rgba(0, 0, 0, 0.05) 0px 1px 3px 0px",
- },
- {
- label: "Medium",
- value: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px",
- },
- {
- label: "Large",
- value: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 10px 10px -5px",
- },
- ],
- };
- },
+ component: ShadowHandler,
+ getProps: () => {},
+ usedStyleProperties: ["box-shadow"],
searchKeyWords: "Shadow, BoxShadow, Box Shadow",
},
{
- component: PropertyControl,
+ component: SplitPropertyControl,
getProps: () => {
return {
label: "Radius",
- styleProperty: "borderRadius",
- enableSlider: true,
- unitOptions: ["px", "%"],
- minValue: 0,
+ placeholder: "None",
+ propertyKey: "borderRadius",
+ unitOptions: RADIUS_UNIT_OPTIONS,
+ splits: ["TL", "TR", "BR", "BL"],
+ getModelValue: (state: string | null = null) =>
+ String(blockController.getStyle(state ? `${state}:borderRadius` : "borderRadius") || ""),
};
},
- searchKeyWords: "Border, Radius, BorderRadius, Border Radius",
events: {
- "update:modelValue": (val: StyleValue) => {
- blockController.setStyle("borderRadius", val);
- if (val) {
- if (!blockController.getStyle("overflowX")) {
- blockController.setStyle("overflowX", "hidden");
- }
- if (!blockController.getStyle("overflowY")) {
- blockController.setStyle("overflowY", "hidden");
- }
- }
+ // rounded corners only show if the content is clipped
+ "update:modelValue": (value: StyleValue) => {
+ if (!value) return;
+ if (!blockController.getStyle("overflowX")) blockController.setStyle("overflowX", "hidden");
+ if (!blockController.getStyle("overflowY")) blockController.setStyle("overflowY", "hidden");
},
},
+ usedStyleProperties: [
+ "border-bottom-left-radius",
+ "border-bottom-right-radius",
+ "border-radius",
+ "border-top-left-radius",
+ "border-top-right-radius",
+ ],
+ searchKeyWords: "Border, Radius, BorderRadius, Border Radius",
},
{
- component: PropertyControl,
+ component: StylePropertyControl,
getProps: () => {
return {
label: "Z-Index",
- styleProperty: "zIndex",
+ propertyKey: "zIndex",
};
},
- searchKeyWords: "Z, Index, ZIndex, Z Index",
+ searchKeyWords: "Z, Index, ZIndex, Z Index, Z-index, Z-Index",
condition: () =>
!blockController.multipleBlocksSelected() &&
!blockController.isRoot() &&
blockController.getStyle("position") !== "static",
},
{
- component: PropertyControl,
+ component: StylePropertyControl,
getProps: () => {
return {
label: "Overflow X",
type: "select",
- styleProperty: "overflowX",
+ propertyKey: "overflowX",
options: overflowOptions,
setModelValue: (val: StyleValue) => {
if (val === "unset") {
@@ -209,15 +213,14 @@ const styleSectionProperties = [
"Overflow, X, OverflowX, Overflow X, Auto, Visible, Hide, Scroll, horizontal scroll, horizontalScroll",
},
{
- component: PropertyControl,
+ component: StylePropertyControl,
getProps: () => {
return {
label: "Overflow Y",
- styleProperty: "overflowY",
+ propertyKey: "overflowY",
type: "select",
options: overflowOptions,
setModelValue: (val: StyleValue) => {
- console.log("Setting overflowY to", val);
if (val === "unset") {
val = null;
}
@@ -228,6 +231,41 @@ const styleSectionProperties = [
searchKeyWords:
"Overflow, Y, OverflowY, Overflow Y, Auto, Visible, Hide, Scroll, vertical scroll, verticalScroll",
},
+ {
+ component: StylePropertyControl,
+ getProps: () => {
+ return {
+ label: "Cursor",
+ propertyKey: "cursor",
+ type: "select",
+ options: [
+ { value: null, label: "Default" },
+ { value: "pointer", label: "Pointer" },
+ { value: "move", label: "Move" },
+ { value: "text", label: "Text" },
+ { value: "crosshair", label: "Crosshair" },
+ { value: "not-allowed", label: "Not Allowed" },
+ ],
+ };
+ },
+ searchKeyWords: "Cursor, Pointer, Move, Text, Crosshair, NotAllowed, Not Allowed",
+ },
+ {
+ component: StylePropertyControl,
+ getProps: () => {
+ return {
+ label: "Rotation",
+ propertyKey: "rotate",
+ enableSlider: true,
+ unitOptions: ROTATION_UNIT_OPTIONS,
+ minValue: -360,
+ maxValue: 360,
+ defaultValue: 0,
+ };
+ },
+ searchKeyWords: "Rotation, Rotate, Angle, Degrees",
+ condition: () => !blockController.multipleBlocksSelected() && !blockController.isRoot(),
+ },
];
export default {
diff --git a/frontend/src/components/BlockPropertySections/TransitionSection.ts b/frontend/src/components/BlockPropertySections/TransitionSection.ts
index 12e220477..86834321b 100644
--- a/frontend/src/components/BlockPropertySections/TransitionSection.ts
+++ b/frontend/src/components/BlockPropertySections/TransitionSection.ts
@@ -1,13 +1,13 @@
+import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
import blockController from "@/utils/blockController";
-import PropertyControl from "../Controls/PropertyControl.vue";
const transitionSectionProperties = [
{
- component: PropertyControl,
+ component: StylePropertyControl,
getProps: () => {
return {
label: "Speed",
- styleProperty: "transitionDuration",
+ propertyKey: "transitionDuration",
type: "select",
enableStates: false,
options: [
@@ -39,11 +39,11 @@ const transitionSectionProperties = [
searchKeyWords: "Transition, Duration, Speed, Animation Time",
},
{
- component: PropertyControl,
+ component: StylePropertyControl,
getProps: () => {
return {
label: "Timing",
- styleProperty: "transitionTimingFunction",
+ propertyKey: "transitionTimingFunction",
type: "select",
enableStates: false,
options: [
@@ -59,11 +59,11 @@ const transitionSectionProperties = [
condition: () => blockController.getStyle("transitionDuration"),
},
{
- component: PropertyControl,
+ component: StylePropertyControl,
getProps: () => {
return {
label: "Properties",
- styleProperty: "transitionProperty",
+ propertyKey: "transitionProperty",
type: "select",
enableStates: false,
options: [
diff --git a/frontend/src/components/BlockPropertySections/TypographySection.ts b/frontend/src/components/BlockPropertySections/TypographySection.ts
index 5ee8cb8ca..1d53fbc31 100644
--- a/frontend/src/components/BlockPropertySections/TypographySection.ts
+++ b/frontend/src/components/BlockPropertySections/TypographySection.ts
@@ -1,11 +1,11 @@
import Autocomplete from "@/components/Controls/Autocomplete.vue";
-import FontUploader from "@/components/Controls/FontUploader.vue";
+import BasePropertyControl from "@/components/Controls/BasePropertyControl.vue";
+import FontInput from "@/components/Controls/FontInput.vue";
import OptionToggle from "@/components/Controls/OptionToggle.vue";
-import PropertyControl from "@/components/Controls/PropertyControl.vue";
-import userFonts from "@/data/userFonts";
-import { UserFont } from "@/types/Builder/UserFont";
+import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
import blockController from "@/utils/blockController";
-import { setFont as _setFont, fontList, getFontWeightOptions } from "@/utils/fontManager";
+import { setFont as _setFont, getFontWeightOptions, loadFontList } from "@/utils/fontManager";
+import { BOX_UNIT_OPTIONS } from "@/utils/unitOptions";
const setFont = (font: string) => {
_setFont(font, null).then(() => {
@@ -15,12 +15,12 @@ const setFont = (font: string) => {
const typographySectionProperties = [
{
- component: PropertyControl,
+ component: BasePropertyControl,
getProps: () => {
return {
label: "Content",
+ propertyKey: "innerHTML",
controlType: "key",
- styleProperty: "innerHTML",
// @ts-ignore
allowDynamicValue: true,
getModelValue: () => blockController.getText(),
@@ -34,52 +34,12 @@ const typographySectionProperties = [
(blockController.isText() || blockController.isButton()) && !blockController.multipleBlocksSelected(),
},
{
- component: PropertyControl,
+ component: StylePropertyControl,
getProps: () => {
return {
label: "Family",
- component: Autocomplete,
- styleProperty: "fontFamily",
- getOptions: (filterString: string) => {
- const fontOptions = [] as { label: string; value: string }[];
- userFonts.data.forEach((font: UserFont) => {
- if (fontOptions.length >= 20) {
- return;
- }
- const fontName = font.font_name as string;
- if (fontName.toLowerCase().includes(filterString.toLowerCase()) || !filterString) {
- fontOptions.push({
- label: fontName,
- value: fontName,
- });
- }
- });
- if (fontOptions.length) {
- fontOptions.unshift({
- label: "Custom",
- value: "_separator_1",
- });
- fontOptions.push({
- label: "Default",
- value: "_separator_2",
- });
- }
- fontList.items.forEach((font) => {
- if (fontOptions.length >= 20) {
- return;
- }
- if (font.family.toLowerCase().includes(filterString.toLowerCase()) || !filterString) {
- fontOptions.push({
- label: font.family,
- value: font.family,
- });
- }
- });
- return fontOptions;
- },
- actionButton: {
- component: FontUploader,
- },
+ component: FontInput,
+ propertyKey: "fontFamily",
getModelValue: () => blockController.getFontFamily(),
setModelValue: (val: string) => setFont(val),
};
@@ -88,63 +48,75 @@ const typographySectionProperties = [
condition: () => blockController.isText() || blockController.isContainer(),
},
{
- component: PropertyControl,
+ component: StylePropertyControl,
getProps: () => {
return {
label: "Weight",
- styleProperty: "fontWeight",
+ propertyKey: "fontWeight",
component: Autocomplete,
- options: getFontWeightOptions((blockController.getStyle("fontFamily") || "Inter") as string),
+ // static options were never query-filtered, so ignore the search
+ // string; awaiting the list keeps all weights of a preselected
+ // font available on first open
+ getOptions: async () => {
+ await loadFontList();
+ return getFontWeightOptions((blockController.getStyle("fontFamily") || "Inter") as string);
+ },
+ step: 100,
+ min: 100,
+ max: 900,
};
},
searchKeyWords: "Font, Weight, FontWeight",
},
{
- component: PropertyControl,
+ component: StylePropertyControl,
getProps: () => {
return {
label: "Size",
- styleProperty: "fontSize",
+ propertyKey: "fontSize",
enableSlider: true,
minValue: 1,
+ unitOptions: BOX_UNIT_OPTIONS,
};
},
searchKeyWords: "Font, Size, FontSize",
condition: () => blockController.isText() || blockController.isInput(),
},
{
- component: PropertyControl,
+ component: StylePropertyControl,
getProps: () => {
return {
label: "Height",
- styleProperty: "lineHeight",
+ propertyKey: "lineHeight",
+ enableSlider: true,
};
},
searchKeyWords: "Font, Height, LineHeight, Line Height",
condition: () => blockController.isText(),
},
{
- component: PropertyControl,
+ component: StylePropertyControl,
getProps: () => {
return {
label: "Letter",
- styleProperty: "letterSpacing",
+ propertyKey: "letterSpacing",
+ enableSlider: true,
};
},
searchKeyWords: "Font, Letter, LetterSpacing, Letter Spacing",
condition: () => blockController.isText(),
},
{
- component: PropertyControl,
+ component: StylePropertyControl,
getProps: () => {
return {
label: "Transform",
- styleProperty: "textTransform",
+ propertyKey: "textTransform",
type: "select",
options: [
{
- value: null,
- label: "None",
+ value: "unset",
+ label: "Unset",
},
{
value: "uppercase",
@@ -159,35 +131,45 @@ const typographySectionProperties = [
label: "Capitalize",
},
],
+ setModelValue: (val: string) => {
+ blockController.setStyle("textTransform", val === "unset" ? null : val);
+ },
};
},
- searchKeyWords: "Font, Transform, TextTransform, Text Transform, Capitalize, Uppercase, Lowercase",
+ searchKeyWords:
+ "Font, Transform, TextTransform, Text Transform, Capitalize, Uppercase, Lowercase, Unset, None",
condition: () => blockController.isText(),
},
{
- component: PropertyControl,
+ component: StylePropertyControl,
getProps: () => {
return {
label: "Align",
- styleProperty: "textAlign",
+ propertyKey: "textAlign",
component: OptionToggle,
options: [
{
label: "Left",
value: "left",
- icon: "align-left",
+ icon: "lucide-align-left",
hideLabel: true,
},
{
label: "Center",
value: "center",
- icon: "align-center",
+ icon: "lucide-align-center",
hideLabel: true,
},
{
label: "Right",
value: "right",
- icon: "align-right",
+ icon: "lucide-align-right",
+ hideLabel: true,
+ },
+ {
+ label: "Justify",
+ value: "justify",
+ icon: "lucide-align-justify",
hideLabel: true,
},
],
diff --git a/frontend/src/components/BlockPropertySections/VideoOptionsSection.ts b/frontend/src/components/BlockPropertySections/VideoOptionsSection.ts
index 32562637c..6e6af72ae 100644
--- a/frontend/src/components/BlockPropertySections/VideoOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/VideoOptionsSection.ts
@@ -1,130 +1,103 @@
+import AttributePropertyControl from "@/components/Controls/AttributePropertyControl.vue";
import InlineInput from "@/components/Controls/InlineInput.vue";
import OptionToggle from "@/components/Controls/OptionToggle.vue";
-import PropertyControl from "@/components/Controls/PropertyControl.vue";
import ImageUploadInput from "@/components/ImageUploadInput.vue";
import blockController from "@/utils/blockController";
const videoOptionsSectionProperties = [
{
- component: InlineInput,
+ component: AttributePropertyControl,
getProps: () => {
return {
+ component: InlineInput,
+ propertyKey: "src",
label: "Video URL",
- modelValue: blockController.getAttribute("src"),
+ allowDynamicValue: true,
+ dynamicValueFilterOptions: {
+ excludeOwnProps: true,
+ },
};
},
- searchKeyWords: "Video, URL, Src",
- events: {
- "update:modelValue": (val: string) => blockController.setAttribute("src", val),
- },
+ searchKeyWords: "Source, URL, Link, Video URL, Video Link",
},
{
- component: PropertyControl,
+ component: AttributePropertyControl,
getProps: () => {
return {
component: ImageUploadInput,
- controlType: "attribute",
- styleProperty: "poster",
+ propertyKey: "poster",
label: "Poster",
- imageURL: blockController.getAttribute("poster"),
};
},
- events: {
- "update:imageURL": (val: string) => blockController.setAttribute("poster", val),
- },
searchKeyWords: "Poster, Image, Thumbnail, Preview",
},
{
- component: OptionToggle,
+ component: AttributePropertyControl,
getProps: () => {
return {
+ component: OptionToggle,
+ propertyKey: "controls",
label: "Controls",
options: [
- {
- label: "Show",
- value: "true",
- },
- {
- label: "Hide",
- value: "false",
- },
+ { label: "Show", value: "true" },
+ { label: "Hide", value: "false" },
],
- modelValue: blockController.getAttribute("controls") === "" ? "true" : "false",
+ getModelValue: () => (blockController.getAttribute("controls") === "" ? "true" : "false"),
+ setModelValue: () => blockController.toggleAttribute("controls"),
};
},
searchKeyWords: "Controls, volume, play, pause, stop, mute, unmute, fullscreen, full screen",
- events: {
- "update:modelValue": (val: boolean) => blockController.toggleAttribute("controls"),
- },
},
{
- component: OptionToggle,
+ component: AttributePropertyControl,
getProps: () => {
return {
+ component: OptionToggle,
+ propertyKey: "autoplay",
label: "Autoplay",
options: [
- {
- label: "Yes",
- value: "true",
- },
- {
- label: "No",
- value: "false",
- },
+ { label: "Yes", value: "true" },
+ { label: "No", value: "false" },
],
- modelValue: blockController.getAttribute("autoplay") === "" ? "true" : "false",
+ getModelValue: () => (blockController.getAttribute("autoplay") === "" ? "true" : "false"),
+ setModelValue: () => blockController.toggleAttribute("autoplay"),
};
},
searchKeyWords: "Autoplay, Auto Play",
- events: {
- "update:modelValue": (val: boolean) => blockController.toggleAttribute("autoplay"),
- },
},
{
- component: OptionToggle,
+ component: AttributePropertyControl,
getProps: () => {
return {
+ component: OptionToggle,
+ propertyKey: "muted",
label: "Muted",
options: [
- {
- label: "Yes",
- value: "true",
- },
- {
- label: "No",
- value: "false",
- },
+ { label: "Yes", value: "true" },
+ { label: "No", value: "false" },
],
- modelValue: blockController.getAttribute("muted") === "" ? "true" : "false",
+ getModelValue: () => (blockController.getAttribute("muted") === "" ? "true" : "false"),
+ setModelValue: () => blockController.toggleAttribute("muted"),
};
},
searchKeyWords: "Muted",
- events: {
- "update:modelValue": (val: boolean) => blockController.toggleAttribute("muted"),
- },
},
{
- component: OptionToggle,
+ component: AttributePropertyControl,
getProps: () => {
return {
+ component: OptionToggle,
+ propertyKey: "loop",
label: "Loop",
options: [
- {
- label: "Yes",
- value: "true",
- },
- {
- label: "No",
- value: "false",
- },
+ { label: "Yes", value: "true" },
+ { label: "No", value: "false" },
],
- modelValue: blockController.getAttribute("loop") === "" ? "true" : "false",
+ getModelValue: () => (blockController.getAttribute("loop") === "" ? "true" : "false"),
+ setModelValue: () => blockController.toggleAttribute("loop"),
};
},
searchKeyWords: "Loop",
- events: {
- "update:modelValue": (val: boolean) => blockController.toggleAttribute("loop"),
- },
},
];
diff --git a/frontend/src/components/BlockPropertySections/index.ts b/frontend/src/components/BlockPropertySections/index.ts
new file mode 100644
index 000000000..ec03d2187
--- /dev/null
+++ b/frontend/src/components/BlockPropertySections/index.ts
@@ -0,0 +1,61 @@
+import accessibilitySection from "@/components/BlockPropertySections/AccessibilitySection";
+import collectionOptionsSection from "@/components/BlockPropertySections/CollectionOptionsSection";
+import customAttributesSection from "@/components/BlockPropertySections/CustomAttributesSection";
+import dataKeySection from "@/components/BlockPropertySections/DataKeySection";
+import dimensionSection from "@/components/BlockPropertySections/DimensionSection";
+import editorConfigSection from "@/components/BlockPropertySections/EditorConfigSection";
+import HTMLOptionsSection from "@/components/BlockPropertySections/HTMLOptionsSection";
+import imageOptionsSection from "@/components/BlockPropertySections/ImageOptionsSection";
+import inputOptionsSection from "@/components/BlockPropertySections/InputOptionsSection";
+import layoutSection from "@/components/BlockPropertySections/LayoutSection";
+import linkSection from "@/components/BlockPropertySections/LinkSection";
+import moreStylesSection from "@/components/BlockPropertySections/MoreStylesSection";
+import optionsSection from "@/components/BlockPropertySections/OptionsSection";
+import positionSection from "@/components/BlockPropertySections/PositionSection";
+import spacingSection from "@/components/BlockPropertySections/SpacingSection";
+import standardPropsInputSection from "@/components/BlockPropertySections/StandardPropsInputSection";
+import styleSection from "@/components/BlockPropertySections/StyleSection";
+import transitionSection from "@/components/BlockPropertySections/TransitionSection";
+import typographySection from "@/components/BlockPropertySections/TypographySection";
+import videoOptionsSection from "@/components/BlockPropertySections/VideoOptionsSection";
+import type { Component } from "vue";
+
+export type BlockProperty = {
+ component: Component;
+ getProps?: () => Record;
+ events?: Record;
+ searchKeyWords: string;
+ condition?: () => boolean;
+ innerText?: string;
+ usedStyleProperties?: string[];
+};
+
+export type PropertySection = {
+ name: string;
+ properties: BlockProperty[] | (() => BlockProperty[]);
+ condition?: () => boolean;
+ collapsed?: boolean;
+};
+
+export const sections = [
+ standardPropsInputSection,
+ collectionOptionsSection,
+ linkSection,
+ layoutSection,
+ imageOptionsSection,
+ HTMLOptionsSection,
+ videoOptionsSection,
+ inputOptionsSection,
+ typographySection,
+ styleSection,
+ dimensionSection,
+ spacingSection,
+ transitionSection,
+ optionsSection,
+ positionSection,
+ dataKeySection,
+ accessibilitySection,
+ customAttributesSection,
+ editorConfigSection,
+ moreStylesSection,
+] as PropertySection[];
diff --git a/frontend/src/components/BorderRadiusHandler.vue b/frontend/src/components/BorderRadiusHandler.vue
index adab3b15c..caa6449df 100644
--- a/frontend/src/components/BorderRadiusHandler.vue
+++ b/frontend/src/components/BorderRadiusHandler.vue
@@ -1,4 +1,6 @@
+ {{ borderRadius }}
+
-
+ size="md"
+ :variant="
+ builderStore.leftPanelActiveTab === option.value ||
+ (showTokenManager && option.value === 'variables')
+ ? 'subtle'
+ : 'ghost'
+ "
+ @click.stop="setActiveTab(option.value as LeftSidebarTabOption)">
diff --git a/frontend/src/components/BuilderSettings.vue b/frontend/src/components/BuilderSettings.vue
index 88f341cb8..6f4a5fc40 100644
--- a/frontend/src/components/BuilderSettings.vue
+++ b/frontend/src/components/BuilderSettings.vue
@@ -1,71 +1,89 @@
-
Note: This is only evaluated in the preview mode.", }; }, searchKeyWords: "Condition, Visibility, VisibilityCondition, Visibility Condition, show, hide, display, hideIf, showIf", - events: { - "update:modelValue": (val: string) => blockController.setKeyValue("visibilityCondition", val), - }, condition: () => !blockController.isRoot(), }, ]; diff --git a/frontend/src/components/BlockPropertySections/PositionSection.ts b/frontend/src/components/BlockPropertySections/PositionSection.ts index 40bc75662..49233ad49 100644 --- a/frontend/src/components/BlockPropertySections/PositionSection.ts +++ b/frontend/src/components/BlockPropertySections/PositionSection.ts @@ -8,6 +8,7 @@ const positionSectionProperties = [ searchKeyWords: "Position, Top, Right, Bottom, Left, PositionTop, Position Top, PositionRight, Position Right, PositionBottom, Position Bottom, PositionLeft, Position Left, Free, Fixed, Absolute, Relative, Sticky", getProps: () => {}, + usedStyleProperties: ["bottom", "left", "position", "right", "top"], }, ]; diff --git a/frontend/src/components/BlockPropertySections/RawStyleSection.ts b/frontend/src/components/BlockPropertySections/RawStyleSection.ts deleted file mode 100644 index 755910211..000000000 --- a/frontend/src/components/BlockPropertySections/RawStyleSection.ts +++ /dev/null @@ -1,38 +0,0 @@ -import ObjectEditor from "@/components/ObjectEditor.vue"; -import blockController from "@/utils/blockController"; -import { computed } from "vue"; - -const rawStyleSectionProperties = [ - { - component: ObjectEditor, - getProps: () => { - return { - obj: blockController.getRawStyles() as Record
-
- • Raw styles get applied across all devices -
- • State based styles are supported (e.g. hover, focus, visited) -
- Syntax: hover:color, focus:color, etc. -
- • State styles are only activated in preview mode - `, - }; - }, - searchKeyWords: "Raw, RawStyle, Raw Style, CSS, Style, Styles", - events: { - "update:obj": (obj: Record
-
+ @mousedown.stop="handleRounded" />
diff --git a/frontend/src/components/BuilderBlockTemplates.vue b/frontend/src/components/BuilderBlockTemplates.vue
index 93eb409d3..7ed394077 100644
--- a/frontend/src/components/BuilderBlockTemplates.vue
+++ b/frontend/src/components/BuilderBlockTemplates.vue
@@ -1,18 +1,7 @@
-
- {{ borderRadius }}
-
-
-
-
+
diff --git a/frontend/src/components/BuilderLeftPanel.vue b/frontend/src/components/BuilderLeftPanel.vue
index 40f0ee33b..18c074c75 100644
--- a/frontend/src/components/BuilderLeftPanel.vue
+++ b/frontend/src/components/BuilderLeftPanel.vue
@@ -3,28 +3,30 @@
-
-
+
+
+
![]()
-
+
{{ blockTemplate.template_name }}
+
+
- Settings
-
-
diff --git a/frontend/src/components/CollapsibleSection.vue b/frontend/src/components/CollapsibleSection.vue
index d8df3d3a5..773c8d25a 100644
--- a/frontend/src/components/CollapsibleSection.vue
+++ b/frontend/src/components/CollapsibleSection.vue
@@ -1,14 +1,14 @@
-
+ Settings
+
-
+
{{ item.title }}
-
-
-
+
-
+
+
{{ selectedItemDoc?.title }}
-{{ selectedItemDoc?.title }}
+
+ Loading...
+
-
+
+
+
+ Command Palette
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/CommandPaletteItem.vue b/frontend/src/components/CommandPaletteItem.vue
new file mode 100644
index 000000000..dfd86722a
--- /dev/null
+++ b/frontend/src/components/CommandPaletteItem.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/ContextMenu.vue b/frontend/src/components/ContextMenu.vue
index 2e4f5c04b..3236c1bda 100644
--- a/frontend/src/components/ContextMenu.vue
+++ b/frontend/src/components/ContextMenu.vue
@@ -1,70 +1,93 @@
-
+
+
+
+
diff --git a/frontend/src/components/Controls/AnglePicker.vue b/frontend/src/components/Controls/AnglePicker.vue
new file mode 100644
index 000000000..9617acac5
--- /dev/null
+++ b/frontend/src/components/Controls/AnglePicker.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index fcb470855..fcad75abf 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -1,235 +1,381 @@
-
diff --git a/frontend/src/components/PageActionsDropdown.vue b/frontend/src/components/PageActionsDropdown.vue
new file mode 100644
index 000000000..21fb2d7b5
--- /dev/null
+++ b/frontend/src/components/PageActionsDropdown.vue
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/components/PageCard.vue b/frontend/src/components/PageCard.vue
index 01aeaee81..4fea0ce33 100644
--- a/frontend/src/components/PageCard.vue
+++ b/frontend/src/components/PageCard.vue
@@ -1,7 +1,7 @@
diff --git a/frontend/src/components/PageClientScriptManager.vue b/frontend/src/components/PageClientScriptManager.vue
index 15f4abe53..d8f2c673f 100644
--- a/frontend/src/components/PageClientScriptManager.vue
+++ b/frontend/src/components/PageClientScriptManager.vue
@@ -1,82 +1,98 @@
-
-
-
-
-
diff --git a/frontend/src/components/PageScript.vue b/frontend/src/components/PageScript.vue
index 57cf271bc..c4890905f 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -1,49 +1,144 @@
-
{{ sectionName }}
-
+
+
+
+
+
+ esc
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ group.title }}
+
+
+
+
+
+
+ Searching...
+ No results for "{{ localQuery }}"
+ {{ hint || "No commands found" }}
+
+
+
+
+
+
+
+
+
+
+
+
+ Navigate
+
+
+
+
+
+ Select
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/ComponentUpdates.vue b/frontend/src/components/ComponentUpdates.vue
new file mode 100644
index 000000000..49a28d18e
--- /dev/null
+++ b/frontend/src/components/ComponentUpdates.vue
@@ -0,0 +1,113 @@
+
+
+
+
+
+ Component updates
+
+
+ + These components changed since this page was last updated. Update to use the latest. +
+
+
+
+
+
+ {{ item.component_name }}
+
+ {{ item.count }} instance{{ item.count === 1 ? "" : "s" }}
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/Controls/AttributePropertyControl.vue b/frontend/src/components/Controls/AttributePropertyControl.vue
new file mode 100644
index 000000000..dbe42d73b
--- /dev/null
+++ b/frontend/src/components/Controls/AttributePropertyControl.vue
@@ -0,0 +1,62 @@
+d
+
+
+
+
+
+
+
-
-
+
-
+
+
diff --git a/frontend/src/components/Controls/BasePropertyControl.vue b/frontend/src/components/Controls/BasePropertyControl.vue
new file mode 100644
index 000000000..1543870d4
--- /dev/null
+++ b/frontend/src/components/Controls/BasePropertyControl.vue
@@ -0,0 +1,329 @@
+
+
+ @update:modelValue="handleColorUpdate">
+
diff --git a/frontend/src/components/Controls/ColorPickerContent.vue b/frontend/src/components/Controls/ColorPickerContent.vue
new file mode 100644
index 000000000..98a49e0c6
--- /dev/null
+++ b/frontend/src/components/Controls/ColorPickerContent.vue
@@ -0,0 +1,327 @@
+
+
-
-
-
-
-
-
+ class="group form-input flex h-7 flex-1 items-center gap-2 rounded bg-surface-gray-2 p-0 text-sm text-ink-gray-8 transition-colors focus-within:bg-surface-base focus-within:ring-1 focus-within:ring-outline-gray-4"
+ :class="{
+ 'can-show-arrows': canShowArrows,
+ }">
+
+
+
-
-
- {{ option.label }}
-
-
-
+
+
-
+
-
-
- {{ actionButton.label }}
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/Controls/BuilderButton.vue b/frontend/src/components/Controls/BuilderButton.vue
deleted file mode 100644
index 08b558eb9..000000000
--- a/frontend/src/components/Controls/BuilderButton.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-
-
-
-
diff --git a/frontend/src/components/Controls/CodeEditor.vue b/frontend/src/components/Controls/CodeEditor.vue
index 1a8c54db3..64d69b222 100644
--- a/frontend/src/components/Controls/CodeEditor.vue
+++ b/frontend/src/components/Controls/CodeEditor.vue
@@ -1,26 +1,20 @@
+
+
+ Set Dynamic Value
+
+
+
+
+
+
+
+
+
+
-
+
{{ label }}
●
+
+ :disabled="!isDirty || readonly">
Save
-
+
diff --git a/frontend/src/components/Controls/ColorInput.vue b/frontend/src/components/Controls/ColorInput.vue
index 993a48f4d..4b695a691 100644
--- a/frontend/src/components/Controls/ColorInput.vue
+++ b/frontend/src/components/Controls/ColorInput.vue
@@ -3,6 +3,7 @@
-
+ class="flex h-[30vh] max-h-[80vh] resize-y overflow-hidden !rounded border border-outline-gray-2 bg-surface-gray-2">
+
+
+
-
+
+
+
diff --git a/frontend/src/components/Controls/Dialog.vue b/frontend/src/components/Controls/Dialog.vue
index dd7a4f96c..1a4c2832d 100644
--- a/frontend/src/components/Controls/Dialog.vue
+++ b/frontend/src/components/Controls/Dialog.vue
@@ -1,5 +1,10 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
@@ -14,7 +14,7 @@
+
-
+
-
@@ -22,56 +22,30 @@
+
{{ page.page_title || page.page_name }}
Edited {{ timeAgo }}
-
-
diff --git a/frontend/src/components/PagePreviewCard.vue b/frontend/src/components/PagePreviewCard.vue
deleted file mode 100644
index 500fc4b86..000000000
--- a/frontend/src/components/PagePreviewCard.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-
-
+
+
-
-
+
+
+
+
+
+
+
+
+
+
-
-
- {{ script.script_name }}
-
-
+
+
+
-
-
-
+
+ {{ script.script_name }}
+
+
+
+
+
+ class="[&>div>div>div]:w-full">
- New Script
+
-
-
- Attach Script
+ placeholder="Attach Script"
+ @update:modelValue="(value: string | null) => value && attachScript(value)">
+
+
-
+
@@ -88,7 +104,7 @@
Add Script
@@ -100,29 +116,47 @@
:label="activeScript.script_name"
:type="activeScript.script_type as 'JavaScript' | 'CSS'"
class="flex-1"
+ mode="page"
height="65vh"
+ :readonly="builderStore.readOnlyMode"
:autofocus="false"
:show-save-button="true"
@save="updateScript"
- :show-line-numbers="true">
+ :show-line-numbers="true">
+
+
+ {{ usageMessage }}
+
+
+
- ![]()
-
-
-
-
-
-
-
-
-
-
-
-
- - {{ page.page_title || page.page_name }} -
-Edited {{ timeAgo }}
-
- ![]()
-
-
-
-
-
-
-
-
- - {{ page.page_title || page.page_name }} -
-
-
- - {{ page.route }} -
-
-
-
-
-
- Created By {{ page.owner }}
- · -Edited {{ timeAgo }}
-
-
- Published
-
-
-
-
-
-
-
- Client Script
- Data Script
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ mode == "component" ? "Component Props" : "Block Props" }}
+
+