@vectoriox/iox-builder 1.2.8 → 1.3.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -3826,6 +3826,7 @@ var TraitInputType;
     TraitInputType["Icon"] = "icon";
     TraitInputType["Media"] = "media";
     TraitInputType["FontFamily"] = "fontFamily";
+    TraitInputType["GridTemplate"] = "gridTemplate";
 })(TraitInputType || (TraitInputType = {}));
 function generateNodeId() {
     return Math.random().toString(36).substr(2, 9);
@@ -3888,6 +3889,7 @@ function resolveTraitControllerType(type) {
         case TraitInputType.Icon: return 'icon';
         case TraitInputType.Media: return 'media';
         case TraitInputType.FontFamily: return 'select';
+        case TraitInputType.GridTemplate: return 'gridTemplate';
         default: return 'text';
     }
 }
@@ -3932,13 +3934,20 @@ class PositionGroupStyleConfig extends GroupStyleConfig {
 class LayoutGroupStyleConfig extends GroupStyleConfig {
     constructor() {
         super(StyleCategory.Layout, [
-            new TraitConfig('display', 'Display', TraitInputType.Select, ['block', 'inline', 'inline-block', 'flex'], 'block'),
+            new TraitConfig('display', 'Display', TraitInputType.Select, ['block', 'inline', 'inline-block', 'flex', 'grid'], 'block'),
+            // ── Flex-only ─────────────────────────────────────────────────────
             new TraitConfig('flexDirection', 'Direction', TraitInputType.SelectButton, [
                 { value: 'row', label: 'Horizontal', icon: 'ph-thin ph-arrow-right' },
                 { value: 'row-reverse', label: 'Horizontal Reversed', icon: 'ph-thin ph-arrow-left' },
                 { value: 'column', label: 'Vertical', icon: 'ph-thin ph-arrow-down' },
                 { value: 'column-reverse', label: 'Vertical Reversed', icon: 'ph-thin ph-arrow-up' },
             ], 'row', false, { trait: 'display', values: 'flex' }),
+            new TraitConfig('flexWrap', 'Flex Wrap', TraitInputType.SelectButton, [
+                { value: 'nowrap', label: 'No Wrap', icon: 'ph-thin ph-minus' },
+                { value: 'wrap', label: 'Wrap', icon: 'ph-thin ph-arrow-elbow-down-right' },
+                { value: 'wrap-reverse', label: 'Wrap Reversed', icon: 'ph-thin ph-arrow-elbow-up-right' },
+            ], 'nowrap', false, { trait: 'display', values: 'flex' }),
+            // ── Shared flex + grid ────────────────────────────────────────────
             new TraitConfig('justifyContent', 'Justify', TraitInputType.SelectButton, [
                 { value: 'flex-start', label: 'Start', icon: 'ph-thin ph-align-left' },
                 { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-horizontal' },
@@ -3946,19 +3955,32 @@ class LayoutGroupStyleConfig extends GroupStyleConfig {
                 { value: 'space-between', label: 'Space Between', icon: 'ph-thin ph-distribute-horizontal' },
                 { value: 'space-around', label: 'Space Around', icon: 'ph-thin ph-dots-three' },
                 { value: 'space-evenly', label: 'Space Evenly', icon: 'ph-thin ph-dots-six' },
-            ], 'flex-start', false, { trait: 'display', values: 'flex' }),
-            new TraitConfig('alignItems', 'Align', TraitInputType.SelectButton, [
+            ], 'flex-start', false, { trait: 'display', values: ['flex', 'grid'] }),
+            new TraitConfig('alignItems', 'Align Items', TraitInputType.SelectButton, [
                 { value: 'stretch', label: 'Stretch', icon: 'ph-thin ph-arrows-vertical' },
-                { value: 'flex-start', label: 'Start', icon: 'ph-thin ph-align-top' },
+                { value: 'start', label: 'Start', icon: 'ph-thin ph-align-top' },
                 { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-vertical' },
-                { value: 'flex-end', label: 'End', icon: 'ph-thin ph-align-bottom' },
-            ], 'stretch', false, { trait: 'display', values: 'flex' }),
-            new TraitConfig('flexWrap', 'Flex Wrap', TraitInputType.SelectButton, [
-                { value: 'nowrap', label: 'No Wrap', icon: 'ph-thin ph-minus' },
-                { value: 'wrap', label: 'Wrap', icon: 'ph-thin ph-arrow-elbow-down-right' },
-                { value: 'wrap-reverse', label: 'Wrap Reversed', icon: 'ph-thin ph-arrow-elbow-up-right' },
-            ], 'nowrap', false, { trait: 'display', values: 'flex' }),
-            new TraitConfig('gap', 'Gap', TraitInputType.Scrub, { min: 0, max: 200, step: 1, units: UNITS_FIXED }, '0px', false, { trait: 'display', values: 'flex' }),
+                { value: 'end', label: 'End', icon: 'ph-thin ph-align-bottom' },
+            ], 'stretch', false, { trait: 'display', values: ['flex', 'grid'] }),
+            new TraitConfig('gap', 'Gap', TraitInputType.Scrub, { min: 0, max: 200, step: 1, units: UNITS_FIXED }, '0px', false, { trait: 'display', values: ['flex', 'grid'] }),
+            // ── Grid-only ─────────────────────────────────────────────────────
+            new TraitConfig('gridTemplateColumns', 'Columns', TraitInputType.GridTemplate, undefined, '1fr', false, { trait: 'display', values: 'grid' }),
+            new TraitConfig('gridTemplateRows', 'Rows', TraitInputType.GridTemplate, undefined, 'auto', false, { trait: 'display', values: 'grid' }),
+            new TraitConfig('justifyItems', 'Justify Items', TraitInputType.SelectButton, [
+                { value: 'stretch', label: 'Stretch', icon: 'ph-thin ph-arrows-horizontal' },
+                { value: 'start', label: 'Start', icon: 'ph-thin ph-align-left' },
+                { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-horizontal' },
+                { value: 'end', label: 'End', icon: 'ph-thin ph-align-right' },
+            ], 'stretch', false, { trait: 'display', values: 'grid' }),
+            new TraitConfig('alignContent', 'Align Content', TraitInputType.SelectButton, [
+                { value: 'start', label: 'Start', icon: 'ph-thin ph-align-top' },
+                { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-vertical' },
+                { value: 'end', label: 'End', icon: 'ph-thin ph-align-bottom' },
+                { value: 'space-between', label: 'Space Between', icon: 'ph-thin ph-distribute-vertical' },
+                { value: 'space-around', label: 'Space Around', icon: 'ph-thin ph-dots-three' },
+                { value: 'stretch', label: 'Stretch', icon: 'ph-thin ph-arrows-vertical' },
+            ], 'stretch', false, { trait: 'display', values: 'grid' }),
+            // ── Direction (always visible) ────────────────────────────────────
             new TraitConfig('direction', 'Text Direction', TraitInputType.SelectButton, [
                 { value: 'ltr', label: 'LTR' },
                 { value: 'rtl', label: 'RTL' },
@@ -3976,7 +3998,7 @@ class SizeGroupStyleConfig extends GroupStyleConfig {
             new TraitConfig('minHeight', 'Min H', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
             new TraitConfig('maxWidth', 'Max W', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
             new TraitConfig('maxHeight', 'Max H', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
-            new TraitConfig('aspectRatio', 'Aspect Ratio', TraitInputType.Select, ['auto', '1/1', '4/3', '16/9', '3/2', '2/3', '9/16'], 'auto'),
+            new TraitConfig('aspectRatio', 'Aspect Ratio', TraitInputType.Text, undefined, 'auto'),
         ]);
     }
 }