@grafloria/element 0.3.17 → 0.3.19

package/src/libs/renderer/src/types/property-schema/conditions.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Conditional visibility types for property schema
+ *
+ * @packageDocumentation
+ */
+/**
+ * Comparison operators for property conditions
+ *
+ * @example
+ * ```typescript
+ * // Equality check
+ * const condition: PropertyCondition = {
+ *   property: 'type',
+ *   operator: '==',
+ *   value: 'table'
+ * };
+ * ```
+ */
+export type ConditionOperator = '==' | '!=' | '>' | '<' | '>=' | '<=' | 'contains' | 'in' | 'notIn' | 'matches';
+/**
+ * Simple condition for property visibility
+ *
+ * @example Equality condition
+ * ```typescript
+ * const condition: PropertyCondition = {
+ *   property: 'useCustomColor',
+ *   operator: '==',
+ *   value: true
+ * };
+ * ```
+ *
+ * @example Comparison condition
+ * ```typescript
+ * const condition: PropertyCondition = {
+ *   property: 'nodeCount',
+ *   operator: '>',
+ *   value: 100
+ * };
+ * ```
+ *
+ * @example Contains condition
+ * ```typescript
+ * const condition: PropertyCondition = {
+ *   property: 'tags',
+ *   operator: 'contains',
+ *   value: 'important'
+ * };
+ * ```
+ */
+export interface PropertyCondition {
+    /**
+     * Key of the property to check
+     */
+    property: string;
+    /**
+     * Comparison operator
+     */
+    operator: ConditionOperator;
+    /**
+     * Value to compare against
+     */
+    value: any;
+}
+/**
+ * Complex condition combining multiple simple conditions
+ *
+ * @example AND condition
+ * ```typescript
+ * const condition: ComplexPropertyCondition = {
+ *   and: [
+ *     { property: 'enabled', operator: '==', value: true },
+ *     { property: 'nodeCount', operator: '>', value: 10 }
+ *   ]
+ * };
+ * ```
+ *
+ * @example OR condition
+ * ```typescript
+ * const condition: ComplexPropertyCondition = {
+ *   or: [
+ *     { property: 'type', operator: '==', value: 'table' },
+ *     { property: 'type', operator: '==', value: 'view' }
+ *   ]
+ * };
+ * ```
+ */
+export interface ComplexPropertyCondition {
+    /**
+     * All conditions must be true (AND logic)
+     */
+    and?: PropertyCondition[];
+    /**
+     * At least one condition must be true (OR logic)
+     */
+    or?: PropertyCondition[];
+}

package/src/libs/renderer/src/types/property-schema/conditions.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * Conditional visibility types for property schema
+ *
+ * @packageDocumentation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=conditions.js.map

package/src/libs/renderer/src/types/property-schema/conditions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conditions.js","sourceRoot":"","sources":["../../../../../../../renderer/src/types/property-schema/conditions.ts"],"names":[],"mappings":";AAAA;;;;GAIG"}

package/src/libs/renderer/src/types/property-schema/editor-types.d.ts

@@ -0,0 +1,310 @@
+/**
+ * Property editor types and type-specific definitions
+ *
+ * @packageDocumentation
+ */
+import { PropertyDefinition } from './property-definition';
+/**
+ * Supported property editor types
+ *
+ * The system supports 12 different editor types for various data types:
+ * - Text: string, textarea
+ * - Numeric: number, slider
+ * - Boolean: boolean
+ * - Selection: select, multiselect
+ * - Visual: color
+ * - Structured: json
+ * - Temporal: date, datetime
+ * - File: file
+ *
+ * @example
+ * ```typescript
+ * const editorType: PropertyEditorType = 'string';
+ * ```
+ */
+export type PropertyEditorType = 'string' | 'number' | 'boolean' | 'select' | 'multiselect' | 'color' | 'textarea' | 'json' | 'date' | 'datetime' | 'slider' | 'file';
+/**
+ * Option for select/multiselect editors
+ *
+ * @example
+ * ```typescript
+ * const option: SelectOption = {
+ *   value: 'table',
+ *   label: 'Database Table',
+ *   disabled: false
+ * };
+ * ```
+ */
+export interface SelectOption {
+    /**
+     * The actual value stored
+     */
+    value: any;
+    /**
+     * Display label shown to user
+     */
+    label: string;
+    /**
+     * Whether this option is disabled
+     */
+    disabled?: boolean;
+}
+/**
+ * String property definition with string-specific validation
+ *
+ * @example
+ * ```typescript
+ * const prop: StringPropertyDefinition = {
+ *   key: 'tableName',
+ *   label: 'Table Name',
+ *   editor: 'string',
+ *   validation: {
+ *     required: true,
+ *     minLength: 3,
+ *     maxLength: 50,
+ *     pattern: '^[a-zA-Z][a-zA-Z0-9_]*$'
+ *   }
+ * };
+ * ```
+ */
+export interface StringPropertyDefinition extends PropertyDefinition {
+    editor: 'string';
+    validation?: {
+        required?: boolean;
+        minLength?: number;
+        maxLength?: number;
+        pattern?: string;
+    };
+}
+/**
+ * Number property definition with number-specific validation
+ *
+ * @example
+ * ```typescript
+ * const prop: NumberPropertyDefinition = {
+ *   key: 'port',
+ *   label: 'Port Number',
+ *   editor: 'number',
+ *   validation: {
+ *     required: true,
+ *     min: 1,
+ *     max: 65535,
+ *     step: 1
+ *   }
+ * };
+ * ```
+ */
+export interface NumberPropertyDefinition extends PropertyDefinition {
+    editor: 'number';
+    validation?: {
+        required?: boolean;
+        min?: number;
+        max?: number;
+        step?: number;
+    };
+}
+/**
+ * Boolean property definition
+ *
+ * @example
+ * ```typescript
+ * const prop: BooleanPropertyDefinition = {
+ *   key: 'enabled',
+ *   label: 'Enabled',
+ *   editor: 'boolean',
+ *   defaultValue: true
+ * };
+ * ```
+ */
+export interface BooleanPropertyDefinition extends PropertyDefinition {
+    editor: 'boolean';
+    defaultValue?: boolean;
+}
+/**
+ * Select (dropdown) property definition with options
+ *
+ * @example
+ * ```typescript
+ * const prop: SelectPropertyDefinition = {
+ *   key: 'nodeType',
+ *   label: 'Node Type',
+ *   editor: 'select',
+ *   options: [
+ *     { value: 'table', label: 'Table' },
+ *     { value: 'view', label: 'View' },
+ *     { value: 'procedure', label: 'Stored Procedure', disabled: true }
+ *   ],
+ *   validation: { required: true }
+ * };
+ * ```
+ */
+export interface SelectPropertyDefinition extends PropertyDefinition {
+    editor: 'select';
+    options: SelectOption[];
+    validation?: {
+        required?: boolean;
+    };
+}
+/**
+ * Multi-select property definition with options
+ *
+ * @example
+ * ```typescript
+ * const prop: MultiSelectPropertyDefinition = {
+ *   key: 'tags',
+ *   label: 'Tags',
+ *   editor: 'multiselect',
+ *   options: [
+ *     { value: 'important', label: 'Important' },
+ *     { value: 'urgent', label: 'Urgent' },
+ *     { value: 'review', label: 'Needs Review' }
+ *   ]
+ * };
+ * ```
+ */
+export interface MultiSelectPropertyDefinition extends PropertyDefinition {
+    editor: 'multiselect';
+    options: SelectOption[];
+    validation?: {
+        required?: boolean;
+    };
+}
+/**
+ * Color picker property definition
+ *
+ * @example
+ * ```typescript
+ * const prop: ColorPropertyDefinition = {
+ *   key: 'backgroundColor',
+ *   label: 'Background Color',
+ *   editor: 'color',
+ *   defaultValue: '#FFFFFF'
+ * };
+ * ```
+ */
+export interface ColorPropertyDefinition extends PropertyDefinition {
+    editor: 'color';
+    defaultValue?: string;
+}
+/**
+ * Textarea (multi-line text) property definition
+ *
+ * @example
+ * ```typescript
+ * const prop: TextAreaPropertyDefinition = {
+ *   key: 'description',
+ *   label: 'Description',
+ *   editor: 'textarea',
+ *   validation: {
+ *     maxLength: 500
+ *   }
+ * };
+ * ```
+ */
+export interface TextAreaPropertyDefinition extends PropertyDefinition {
+    editor: 'textarea';
+    validation?: {
+        required?: boolean;
+        minLength?: number;
+        maxLength?: number;
+    };
+}
+/**
+ * JSON editor property definition
+ *
+ * @example
+ * ```typescript
+ * const prop: JsonPropertyDefinition = {
+ *   key: 'metadata',
+ *   label: 'Metadata',
+ *   editor: 'json',
+ *   defaultValue: { version: '1.0' }
+ * };
+ * ```
+ */
+export interface JsonPropertyDefinition extends PropertyDefinition {
+    editor: 'json';
+    defaultValue?: any;
+}
+/**
+ * Date picker property definition
+ *
+ * @example
+ * ```typescript
+ * const prop: DatePropertyDefinition = {
+ *   key: 'birthDate',
+ *   label: 'Birth Date',
+ *   editor: 'date',
+ *   validation: { required: true }
+ * };
+ * ```
+ */
+export interface DatePropertyDefinition extends PropertyDefinition {
+    editor: 'date';
+    defaultValue?: string | Date;
+    validation?: {
+        required?: boolean;
+    };
+}
+/**
+ * DateTime picker property definition
+ *
+ * @example
+ * ```typescript
+ * const prop: DateTimePropertyDefinition = {
+ *   key: 'createdAt',
+ *   label: 'Created At',
+ *   editor: 'datetime',
+ *   defaultValue: new Date().toISOString()
+ * };
+ * ```
+ */
+export interface DateTimePropertyDefinition extends PropertyDefinition {
+    editor: 'datetime';
+    defaultValue?: string | Date;
+    validation?: {
+        required?: boolean;
+    };
+}
+/**
+ * Slider (range) property definition
+ *
+ * @example
+ * ```typescript
+ * const prop: SliderPropertyDefinition = {
+ *   key: 'opacity',
+ *   label: 'Opacity',
+ *   editor: 'slider',
+ *   min: 0,
+ *   max: 100,
+ *   step: 1,
+ *   defaultValue: 100
+ * };
+ * ```
+ */
+export interface SliderPropertyDefinition extends PropertyDefinition {
+    editor: 'slider';
+    min: number;
+    max: number;
+    step?: number;
+    defaultValue?: number;
+}
+/**
+ * File upload property definition
+ *
+ * @example
+ * ```typescript
+ * const prop: FilePropertyDefinition = {
+ *   key: 'avatar',
+ *   label: 'Avatar Image',
+ *   editor: 'file',
+ *   accept: 'image/*',
+ *   multiple: false
+ * };
+ * ```
+ */
+export interface FilePropertyDefinition extends PropertyDefinition {
+    editor: 'file';
+    accept?: string;
+    multiple?: boolean;
+}

package/src/libs/renderer/src/types/property-schema/editor-types.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * Property editor types and type-specific definitions
+ *
+ * @packageDocumentation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=editor-types.js.map

package/src/libs/renderer/src/types/property-schema/editor-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-types.js","sourceRoot":"","sources":["../../../../../../../renderer/src/types/property-schema/editor-types.ts"],"names":[],"mappings":";AAAA;;;;GAIG"}

package/src/libs/renderer/src/types/property-schema/groups.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Property group types for organizing properties
+ *
+ * @packageDocumentation
+ */
+/**
+ * Property group for organizing related properties
+ *
+ * Groups allow properties to be organized into collapsible sections
+ * in the UI. Each group has a name (used for referencing in property
+ * definitions) and a label (displayed to the user).
+ *
+ * @example Basic group
+ * ```typescript
+ * const group: PropertyGroup = {
+ *   name: 'appearance',
+ *   label: 'Appearance'
+ * };
+ * ```
+ *
+ * @example Group with all options
+ * ```typescript
+ * const group: PropertyGroup = {
+ *   name: 'advanced',
+ *   label: 'Advanced Settings',
+ *   description: 'Advanced configuration options',
+ *   collapsed: true,
+ *   order: 10,
+ *   icon: 'settings'
+ * };
+ * ```
+ */
+export interface PropertyGroup {
+    /**
+     * Unique group identifier (used in PropertyDefinition.group)
+     */
+    name: string;
+    /**
+     * Display label shown in UI
+     */
+    label: string;
+    /**
+     * Optional description or help text
+     */
+    description?: string;
+    /**
+     * Initial collapse state (default: false/expanded)
+     */
+    collapsed?: boolean;
+    /**
+     * Display order (groups with lower order appear first)
+     */
+    order?: number;
+    /**
+     * Optional icon identifier
+     */
+    icon?: string;
+}

package/src/libs/renderer/src/types/property-schema/groups.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * Property group types for organizing properties
+ *
+ * @packageDocumentation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=groups.js.map

package/src/libs/renderer/src/types/property-schema/groups.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"groups.js","sourceRoot":"","sources":["../../../../../../../renderer/src/types/property-schema/groups.ts"],"names":[],"mappings":";AAAA;;;;GAIG"}

package/src/libs/renderer/src/types/property-schema/index.d.ts

@@ -0,0 +1,101 @@
+/**
+ * @packageDocumentation
+ * Property schema types for defining node property editing UI
+ *
+ * This module provides TypeScript interfaces and types for defining
+ * property schemas that describe how node properties should be edited
+ * in UI panels. The schema system is framework-agnostic and can be used
+ * with any UI framework (React, Vue, Angular, etc.).
+ *
+ * ## Core Concepts
+ *
+ * - **PropertyDefinition**: Defines how a single property should be edited
+ * - **PropertySchema**: Complete schema for all properties of a node type
+ * - **PropertyEditorType**: 12 different editor types (string, number, boolean, etc.)
+ * - **PropertyValidation**: Validation rules for property values
+ * - **PropertyCondition**: Conditional visibility based on other properties
+ * - **PropertyGroup**: Organizing properties into collapsible groups
+ *
+ * ## Usage Examples
+ *
+ * ### Basic Property Definition
+ *
+ * ```typescript
+ * const prop: PropertyDefinition = {
+ *   key: 'name',
+ *   label: 'Name',
+ *   editor: 'string',
+ *   validation: { required: true, minLength: 3 }
+ * };
+ * ```
+ *
+ * ### Select Property with Options
+ *
+ * ```typescript
+ * const prop: SelectPropertyDefinition = {
+ *   key: 'type',
+ *   label: 'Type',
+ *   editor: 'select',
+ *   options: [
+ *     { value: 'table', label: 'Table' },
+ *     { value: 'view', label: 'View' }
+ *   ]
+ * };
+ * ```
+ *
+ * ### Complete Schema
+ *
+ * ```typescript
+ * const schema: PropertySchema = {
+ *   properties: [
+ *     {
+ *       key: 'tableName',
+ *       label: 'Table Name',
+ *       editor: 'string',
+ *       validation: { required: true },
+ *       group: 'basic'
+ *     },
+ *     {
+ *       key: 'columns',
+ *       label: 'Columns',
+ *       editor: 'json',
+ *       group: 'schema'
+ *     }
+ *   ],
+ *   groups: [
+ *     { name: 'basic', label: 'Basic Information', order: 1 },
+ *     { name: 'schema', label: 'Schema', order: 2 }
+ *   ]
+ * };
+ * ```
+ *
+ * ### Conditional Visibility
+ *
+ * ```typescript
+ * const prop: PropertyDefinition = {
+ *   key: 'customColor',
+ *   label: 'Custom Color',
+ *   editor: 'color',
+ *   condition: { property: 'useCustomColor', operator: '==', value: true }
+ * };
+ * ```
+ *
+ * ### Custom Validation
+ *
+ * ```typescript
+ * const validation: PropertyValidation = {
+ *   custom: (value, allValues) => {
+ *     if (value < allValues.minValue) {
+ *       return { message: 'Must be greater than minimum' };
+ *     }
+ *     return null;
+ *   }
+ * };
+ * ```
+ */
+export { PropertyDefinition, PropertyEditorType, PropertyDisplayOptions } from './property-definition';
+export { StringPropertyDefinition, NumberPropertyDefinition, BooleanPropertyDefinition, SelectPropertyDefinition, MultiSelectPropertyDefinition, ColorPropertyDefinition, TextAreaPropertyDefinition, JsonPropertyDefinition, DatePropertyDefinition, DateTimePropertyDefinition, SliderPropertyDefinition, FilePropertyDefinition, } from './editor-types';
+export { PropertyValidation, ValidationError, ValidationResult, SelectOption, } from './validation';
+export { PropertyCondition, ConditionOperator, ComplexPropertyCondition, } from './conditions';
+export { PropertyGroup } from './groups';
+export { PropertySchema } from './schema';

package/src/libs/renderer/src/types/property-schema/index.js

@@ -0,0 +1,98 @@
+"use strict";
+/**
+ * @packageDocumentation
+ * Property schema types for defining node property editing UI
+ *
+ * This module provides TypeScript interfaces and types for defining
+ * property schemas that describe how node properties should be edited
+ * in UI panels. The schema system is framework-agnostic and can be used
+ * with any UI framework (React, Vue, Angular, etc.).
+ *
+ * ## Core Concepts
+ *
+ * - **PropertyDefinition**: Defines how a single property should be edited
+ * - **PropertySchema**: Complete schema for all properties of a node type
+ * - **PropertyEditorType**: 12 different editor types (string, number, boolean, etc.)
+ * - **PropertyValidation**: Validation rules for property values
+ * - **PropertyCondition**: Conditional visibility based on other properties
+ * - **PropertyGroup**: Organizing properties into collapsible groups
+ *
+ * ## Usage Examples
+ *
+ * ### Basic Property Definition
+ *
+ * ```typescript
+ * const prop: PropertyDefinition = {
+ *   key: 'name',
+ *   label: 'Name',
+ *   editor: 'string',
+ *   validation: { required: true, minLength: 3 }
+ * };
+ * ```
+ *
+ * ### Select Property with Options
+ *
+ * ```typescript
+ * const prop: SelectPropertyDefinition = {
+ *   key: 'type',
+ *   label: 'Type',
+ *   editor: 'select',
+ *   options: [
+ *     { value: 'table', label: 'Table' },
+ *     { value: 'view', label: 'View' }
+ *   ]
+ * };
+ * ```
+ *
+ * ### Complete Schema
+ *
+ * ```typescript
+ * const schema: PropertySchema = {
+ *   properties: [
+ *     {
+ *       key: 'tableName',
+ *       label: 'Table Name',
+ *       editor: 'string',
+ *       validation: { required: true },
+ *       group: 'basic'
+ *     },
+ *     {
+ *       key: 'columns',
+ *       label: 'Columns',
+ *       editor: 'json',
+ *       group: 'schema'
+ *     }
+ *   ],
+ *   groups: [
+ *     { name: 'basic', label: 'Basic Information', order: 1 },
+ *     { name: 'schema', label: 'Schema', order: 2 }
+ *   ]
+ * };
+ * ```
+ *
+ * ### Conditional Visibility
+ *
+ * ```typescript
+ * const prop: PropertyDefinition = {
+ *   key: 'customColor',
+ *   label: 'Custom Color',
+ *   editor: 'color',
+ *   condition: { property: 'useCustomColor', operator: '==', value: true }
+ * };
+ * ```
+ *
+ * ### Custom Validation
+ *
+ * ```typescript
+ * const validation: PropertyValidation = {
+ *   custom: (value, allValues) => {
+ *     if (value < allValues.minValue) {
+ *       return { message: 'Must be greater than minimum' };
+ *     }
+ *     return null;
+ *   }
+ * };
+ * ```
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=index.js.map

package/src/libs/renderer/src/types/property-schema/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../renderer/src/types/property-schema/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG"}