@gxp-dev/mod-ui 2.0.0

package/src/definitions/elements/DisplayElement.ts

@@ -0,0 +1,194 @@
+import type {
+  BaseElement,
+  EditConfig,
+  ElementMetadata,
+} from "@/definitions/shared/base"
+
+/**
+ * Variants of the `display` element type. Display elements render
+ * content (read-only) — they don't bind to form data the way inputs do.
+ */
+export type DisplayStyle =
+  | "type" // Plain typography. The default.
+  | "markdown"
+  | "html"
+  | "iframe"
+  | "image"
+  | "video"
+  | "banner"
+  | "chart"
+  | "carousel"
+  | "barcode"
+  | "qrcode"
+  | "icon"
+  | "progress-bar"
+  | "sprite"
+  | "reactive-canvas"
+
+/**
+ * Sub-style for the `type` display — picks a typographic role.
+ * Lets the same renderer produce headings, paragraphs, captions, etc.
+ */
+export type DisplayContentType =
+  | "heading-1"
+  | "heading-2"
+  | "heading-3"
+  | "heading-4"
+  | "heading-5"
+  | "heading-6"
+  | "paragraph"
+  | "lead"
+  | "small"
+  | "caption"
+  | "code"
+  | "quote"
+
+export interface DisplayElement extends BaseElement<`display.${DisplayStyle}`> {
+  /**
+   * Optional data-model key. When set, the value at that path overrides
+   * `defaultValue` at render time (useful for binding display content to
+   * a sibling field's value).
+   */
+  name?: string | null
+  /**
+   * Static content. Strings are treated as the raw display value; the
+   * renderer interprets them according to `style` + `contentType`.
+   */
+  defaultValue?: string | number | null
+  /** Sub-style for the `type` display. */
+  contentType?: DisplayContentType
+  /** For `image` / `video` / `iframe`: source URL. */
+  src?: string
+  /** For `image`: alt text. */
+  alt?: string
+  /** For `icon`: lucide icon name. */
+  iconName?: string
+  /** For `progress-bar`: 0–100 percentage. */
+  progress?: number
+  /** For `chart`: chart config payload. */
+  chartConfig?: Record<string, unknown>
+  /** For `carousel`: slide payload. */
+  slides?: ReadonlyArray<Record<string, unknown>>
+}
+
+export const DisplayElementDefaults = {
+  type: "display.type",
+  contentType: "paragraph",
+  defaultValue: "",
+  name: null,
+  columns: 12,
+  columnsSm: 12,
+  columnsMd: 12,
+  columnsLg: 12,
+  columnsXl: 12,
+} as const satisfies Partial<DisplayElement>
+
+export const DisplayElementMetadata = {
+  icon: "type",
+  displayLabel: "Display Content",
+  elementCategory: "display",
+  description:
+    "Read-only content: typography, markdown, images, video, charts, barcodes, icons, and more.",
+} as const satisfies ElementMetadata
+
+export const DisplayElementEditConfig = {
+  style: {
+    type: "option-select.select",
+    defaultValue: "type",
+    label: "Display Style",
+    columns: 12,
+    selectOptions: [
+      { label: "Typography", value: "type" },
+      { label: "Markdown", value: "markdown" },
+      { label: "HTML", value: "html" },
+      { label: "Iframe", value: "iframe" },
+      { label: "Image", value: "image" },
+      { label: "Video", value: "video" },
+      { label: "Banner", value: "banner" },
+      { label: "Chart", value: "chart" },
+      { label: "Carousel", value: "carousel" },
+      { label: "Barcode", value: "barcode" },
+      { label: "QR Code", value: "qrcode" },
+      { label: "Icon", value: "icon" },
+      { label: "Progress Bar", value: "progress-bar" },
+      { label: "Sprite", value: "sprite" },
+      { label: "Reactive Canvas", value: "reactive-canvas" },
+    ],
+    section: "layout",
+  },
+  contentType: {
+    type: "option-select.select",
+    defaultValue: "paragraph",
+    label: "Content Type",
+    columns: 12,
+    selectOptions: [
+      { label: "Heading 1", value: "heading-1" },
+      { label: "Heading 2", value: "heading-2" },
+      { label: "Heading 3", value: "heading-3" },
+      { label: "Heading 4", value: "heading-4" },
+      { label: "Heading 5", value: "heading-5" },
+      { label: "Heading 6", value: "heading-6" },
+      { label: "Paragraph", value: "paragraph" },
+      { label: "Lead", value: "lead" },
+      { label: "Small", value: "small" },
+      { label: "Caption", value: "caption" },
+      { label: "Code", value: "code" },
+      { label: "Quote", value: "quote" },
+    ],
+    section: "layout",
+    conditionParams: [{ name: "style", logic: "==", value: "type" }],
+  },
+  defaultValue: {
+    type: "input.textarea",
+    label: "Content",
+    columns: 12,
+    section: "configuration",
+  },
+  name: {
+    type: "picker.data-model",
+    label: "Data Source Name",
+    columns: 12,
+    section: "configuration",
+  },
+  src: {
+    type: "input.text",
+    label: "Source URL",
+    columns: 12,
+    section: "configuration",
+    conditionParams: [
+      { name: "style", logic: "in-array", value: ["image", "video", "iframe"] },
+    ],
+  },
+  alt: {
+    type: "input.text",
+    label: "Alt Text",
+    columns: 12,
+    section: "configuration",
+    conditionParams: [{ name: "style", logic: "==", value: "image" }],
+  },
+  iconName: {
+    type: "picker.icon",
+    label: "Icon",
+    columns: 12,
+    section: "configuration",
+    conditionParams: [{ name: "style", logic: "==", value: "icon" }],
+  },
+} as const satisfies EditConfig
+
+export const DisplayStyleMetadataMap: Partial<Record<DisplayStyle, { displayLabel: string; description: string }>> = {
+  type: { displayLabel: "Typography", description: "Render styled text: headings, paragraphs, captions, quotes." },
+  markdown: { displayLabel: "Markdown", description: "Render a Markdown string as formatted HTML." },
+  html: { displayLabel: "HTML", description: "Render raw HTML content safely." },
+  iframe: { displayLabel: "Iframe", description: "Embed an external page or document in an iframe." },
+  image: { displayLabel: "Image", description: "Display an image from a URL or asset library." },
+  video: { displayLabel: "Video", description: "Embed and play a video from a URL or asset." },
+  banner: { displayLabel: "Banner", description: "A full-width banner with a background image and overlay text." },
+  chart: { displayLabel: "Chart", description: "Render a Chart.js chart from a data config." },
+  carousel: { displayLabel: "Carousel", description: "Display a scrollable slide carousel." },
+  barcode: { displayLabel: "Barcode", description: "Render a 1D barcode from a string value." },
+  qrcode: { displayLabel: "QR Code", description: "Render a QR code from a string value." },
+  icon: { displayLabel: "Icon", description: "Display a single lucide icon with optional colour and size." },
+  "progress-bar": { displayLabel: "Progress Bar", description: "A percentage-based progress bar." },
+  sprite: { displayLabel: "Sprite", description: "Render an SVG sprite or icon sheet frame." },
+  "reactive-canvas": { displayLabel: "Reactive Canvas", description: "A canvas that reactively renders positioned block elements." },
+}

package/src/definitions/elements/EditorElement.ts

@@ -0,0 +1,164 @@
+import type {
+  BaseElement,
+  EditConfig,
+  ElementMetadata,
+} from "@/definitions/shared/base"
+import type { ValidationConfig } from "@/definitions/shared/validation"
+
+/**
+ * Variants of the `editor` element type. Each value here maps 1:1 to a
+ * Vue file under `src/elements/editor/` via the engine's registry.
+ *
+ * The v2 schema spells the HTML variant as "html" — we accept both
+ * "html" (legacy) and "html-editor" (canonical) by widening the style
+ * accordingly. JSON authored against the platform deserialises either way.
+ */
+export type EditorStyle =
+  | "code-editor"
+  | "markdown-editor"
+  | "html-editor"
+  | "image-editor"
+  | "rich-text-editor"
+
+export interface EditorElement extends BaseElement<`editor.${EditorStyle}`> {
+  name: string
+  label: string
+  defaultValue?: string | number | null
+  /** Help / hint markup rendered above the editor. */
+  instructions?: string
+  /** CSS height (e.g. "40vh", "320px"). */
+  height?: string
+  /** For `code-editor`: language hint (e.g. "javascript", "json"). */
+  language?: string
+  /** Render line numbers (code/markdown editors). */
+  showLineNumbers?: boolean
+  /** Soft-wrap long lines (code/markdown editors). */
+  wordWrap?: boolean
+  /** Validation rules (Laravel-style strings). */
+  validation?: ValidationConfig
+}
+
+export const EditorElementDefaults = {
+  type: "editor.code-editor",
+  defaultValue: "",
+  height: "40vh",
+  columns: 12,
+  columnsSm: 12,
+  columnsMd: 12,
+  columnsLg: 12,
+  columnsXl: 12,
+} as const satisfies Partial<EditorElement>
+
+export const EditorElementMetadata = {
+  icon: "file-lines",
+  displayLabel: "Editor",
+  elementCategory: "editor",
+  description:
+    "Create a large text field to allow users to enter a large amount of text as either HTML, Markdown, Code or plain text.",
+} as const satisfies ElementMetadata
+
+export const EditorElementEditConfig = {
+  label: {
+    type: "input.text",
+    defaultValue: "",
+    label: "Label",
+    columnsMd: 6,
+    columns: 12,
+    section: "configuration",
+  },
+  defaultValue: {
+    type: "input.text",
+    label: "Default Value",
+    columnsMd: 6,
+    columns: 12,
+    section: "configuration",
+  },
+  name: {
+    type: "picker.data-model",
+    defaultValue: "",
+    label: "Name",
+    columns: 12,
+    section: "advanced",
+  },
+  style: {
+    type: "option-select.select",
+    defaultValue: "code-editor",
+    label: "Display Style",
+    section: "layout",
+    selectOptions: [
+      { label: "Code Editor", value: "code-editor" },
+      { label: "Markdown Editor", value: "markdown-editor" },
+      { label: "HTML Editor", value: "html-editor" },
+      { label: "Image Editor", value: "image-editor" },
+      { label: "Rich Text Editor", value: "rich-text-editor" },
+    ],
+    columns: 12,
+  },
+  instructions: {
+    type: "editor.html-editor",
+    label: "Instructions",
+    defaultValue: "",
+    columns: 12,
+    section: "configuration",
+  },
+  height: {
+    type: "input.text",
+    label: "Height",
+    defaultValue: "40vh",
+    columns: 6,
+    section: "layout",
+  },
+  language: {
+    type: "input.text",
+    label: "Language",
+    columns: 6,
+    section: "layout",
+    conditionParams: [{ name: "style", logic: "==", value: "code-editor" }],
+  },
+  showLineNumbers: {
+    type: "boolean.switch",
+    label: "Show line numbers",
+    columns: 6,
+    section: "layout",
+    conditionParams: [
+      {
+        name: "style",
+        logic: "in-array",
+        value: ["code-editor", "markdown-editor"],
+      },
+    ],
+  },
+  wordWrap: {
+    type: "boolean.switch",
+    label: "Word wrap",
+    columns: 6,
+    section: "layout",
+    conditionParams: [
+      {
+        name: "style",
+        logic: "in-array",
+        value: ["code-editor", "markdown-editor"],
+      },
+    ],
+  },
+  required: {
+    type: "boolean.switch",
+    label: "Make item required",
+    columns: 12,
+    section: "configuration",
+  },
+  readonly: {
+    type: "boolean.switch",
+    label: "Make item read-only",
+    columns: 12,
+    section: "configuration",
+  },
+} as const satisfies EditConfig
+
+export const EditorStyleMetadataMap: Partial<Record<EditorStyle, { displayLabel: string; description: string }>> = {
+  "code-editor": { displayLabel: "Code Editor", description: "A syntax-highlighted code editor for scripting or config." },
+  "markdown-editor": { displayLabel: "Markdown Editor", description: "A live-preview Markdown editor." },
+  "html-editor": { displayLabel: "HTML Editor", description: "A WYSIWYG HTML editor with source toggle." },
+  "image-editor": { displayLabel: "Image Editor", description: "An in-browser image editor with cropping and filters." },
+  "rich-text-editor": { displayLabel: "Rich Text Editor", description: "A Tiptap-powered rich text editor with formatting tools." },
+}

package/src/definitions/elements/FileElement.ts

@@ -0,0 +1,133 @@
+import type {
+  BaseElement,
+  EditConfig,
+  ElementMetadata,
+} from "@/definitions/shared/base"
+import type { ValidationConfig } from "@/definitions/shared/validation"
+
+/**
+ * Variants of the `file` element type. Each value here maps 1:1 to a
+ * Vue file under `src/elements/file/` via the engine's registry.
+ */
+export type FileStyle = "upload" | "dropzone" | "asset-picker"
+
+export interface FileElement extends BaseElement<`file.${FileStyle}`> {
+  name: string
+  label?: string
+  /**
+   * MIME-type / extension hint string. Mirrors the HTML `accept` attribute
+   * and the v2 schema (e.g. "image/jpg, image/jpeg, image/png, application/pdf").
+   */
+  accept?: string
+  /** Parsed list form — engine accepts either `accept` or `acceptedFileTypes`. */
+  acceptedFileTypes?: ReadonlyArray<string>
+  /** Allow selecting more than one file. */
+  multiple?: boolean
+  /** Maximum size in bytes for any single uploaded file. */
+  maxFileSize?: number
+  /** For `asset-picker`: filter the asset library to a specific category. */
+  assetType?: string
+  /** Validation rules (Laravel-style strings). */
+  validation?: ValidationConfig
+}
+
+export const FileElementDefaults = {
+  type: "file.upload",
+  label: "File Upload",
+  disabled: false,
+  columns: 12,
+  columnsSm: 12,
+  columnsMd: 12,
+  columnsLg: 12,
+  columnsXl: 12,
+} as const satisfies Partial<FileElement>
+
+export const FileElementMetadata = {
+  icon: "photo-film-music",
+  displayLabel: "File Upload",
+  elementCategory: "file",
+  description:
+    "Upload files or invoke the asset picker to select an asset from the library.",
+} as const satisfies ElementMetadata
+
+export const FileElementEditConfig = {
+  label: {
+    type: "input.text",
+    defaultValue: "",
+    label: "Label",
+    columnsMd: 6,
+    columns: 12,
+    section: "configuration",
+  },
+  defaultValue: {
+    type: "input.text",
+    label: "Default Value",
+    columnsMd: 6,
+    columns: 12,
+    section: "configuration",
+  },
+  name: {
+    type: "picker.data-model",
+    defaultValue: "",
+    label: "Name",
+    columns: 12,
+    section: "advanced",
+  },
+  style: {
+    type: "option-select.select",
+    defaultValue: "upload",
+    label: "Input Style",
+    columns: 6,
+    selectOptions: [
+      { label: "Upload", value: "upload" },
+      { label: "Dropzone", value: "dropzone" },
+      { label: "Asset Picker", value: "asset-picker" },
+    ],
+    section: "layout",
+  },
+  accept: {
+    type: "input.text",
+    label:
+      "Accept File Types (comma separated: 'image/jpg, image/jpeg, image/png, image/*, application/pdf')",
+    columns: 12,
+    section: "configuration",
+  },
+  multiple: {
+    type: "boolean.switch",
+    label: "Allow multiple files",
+    columns: 6,
+    section: "configuration",
+  },
+  maxFileSize: {
+    type: "input.text",
+    contentType: "integer",
+    label: "Max File Size (bytes)",
+    columns: 6,
+    section: "configuration",
+  },
+  assetType: {
+    type: "input.text",
+    label: "Asset Type",
+    columns: 12,
+    section: "configuration",
+    conditionParams: [{ name: "style", logic: "==", value: "asset-picker" }],
+  },
+  required: {
+    type: "boolean.switch",
+    label: "Make item required",
+    columns: 12,
+    section: "configuration",
+  },
+  readonly: {
+    type: "boolean.switch",
+    label: "Make item read-only",
+    columns: 12,
+    section: "configuration",
+  },
+} as const satisfies EditConfig
+
+export const FileStyleMetadataMap: Partial<Record<FileStyle, { displayLabel: string; description: string }>> = {
+  upload: { displayLabel: "File Upload", description: "A button-triggered file upload input." },
+  dropzone: { displayLabel: "Dropzone", description: "A drag-and-drop file upload area." },
+  "asset-picker": { displayLabel: "Asset Picker", description: "Browse and select files from the asset library." },
+}