rw-elements-tools 1.2.0

package/controls/Sizing/SizingInput.js

@@ -0,0 +1,71 @@
+const SizingInput = [
+  {
+    title: "Size",
+    heading: {}
+  },
+  {
+    globalControl: "Width",
+    themeSpacing: {
+      mode: "single",
+      default: {
+        base: {
+          value: "100%",
+          custom: true
+        }
+      }
+    }
+  },
+  {
+    globalControl: "Height"
+  },
+  {
+    divider: {}
+  },
+  {
+    title: "Min & Max Settings",
+    heading: {}
+  },
+  {
+    information: {},
+    title: "Enable this to set both min and max height and width settings."
+  },
+  {
+    title: "Enable",
+    id: "globalSizingMinMaxEnabled",
+    switch: {
+      default: false
+    }
+  },
+  {
+    visible: "globalSizingMinMaxEnabled == true",
+    title: "Width",
+    heading: {}
+  },
+  {
+    visible: "globalSizingMinMaxEnabled == true",
+    title: "Min",
+    globalControl: "MinWidth"
+  },
+  {
+    visible: "globalSizingMinMaxEnabled == true",
+    title: "Max",
+    globalControl: "MaxWidth"
+  },
+  {
+    visible: "globalSizingMinMaxEnabled == true",
+    title: "Height",
+    heading: {}
+  },
+  {
+    visible: "globalSizingMinMaxEnabled == true",
+    title: "Min",
+    globalControl: "MinHeight"
+  },
+  {
+    visible: "globalSizingMinMaxEnabled == true",
+    title: "Max",
+    globalControl: "MaxHeight"
+  }
+]
+
+export default SizingInput;

package/controls/Sizing/SizingSVG.js

@@ -0,0 +1,74 @@
+const SizingSVG = [
+  {
+    title: "Size",
+    heading: {}
+  },
+  {
+    globalControl: "Width",
+    themeSpacing: {
+      mode: "single",
+      default: {
+        base: {
+          value: "20",
+        }
+      }
+    }
+  },
+  {
+    globalControl: "Height"
+  },
+  {
+    divider: {}
+  },
+  {
+    title: "Min & Max Settings",
+    heading: {}
+  },
+  {
+    information: {},
+    title: "Enable this to set both min and max height and width settings."
+  },
+  {
+    title: "Enable",
+    id: "globalSizingMinMaxEnabled",
+    switch: {
+      default: false
+    }
+  },
+  {
+    visible: "globalSizingMinMaxEnabled == true",
+    title: "Width",
+    heading: {}
+  },
+  {
+    visible: "globalSizingMinMaxEnabled == true",
+    title: "Min",
+    globalControl: "MinWidth"
+  },
+  {
+    visible: "globalSizingMinMaxEnabled == true",
+    title: "Max",
+    globalControl: "MaxWidth"
+  },
+  {
+    visible: "globalSizingMinMaxEnabled == true",
+    divider: {}
+  },
+  {
+    visible: "globalSizingMinMaxEnabled == true",
+    title: "Height",
+    heading: {}
+  },
+  {
+    visible: "globalSizingMinMaxEnabled == true",
+    title: "Min",
+    globalControl: "MinHeight"
+  },
+  {
+    visible: "globalSizingMinMaxEnabled == true",
+    title: "Max",
+    globalControl: "MaxHeight"
+  }
+]
+
+export default SizingSVG;

package/controls/Sizing/Width.js

@@ -0,0 +1,18 @@
+const Width = [
+  {
+    title: "Width",
+    id: "globalWidth",
+    format: "w-{{value}}",
+    themeSpacing: {
+      mode: "single",
+      default: {
+        base: {
+          custom: false,
+          value: "auto"
+        }
+      }
+    }
+  }
+];
+
+export default Width;

package/controls/Spacing/Margin.js

@@ -0,0 +1,17 @@
+const Margin = {
+  title: "Margin",
+  id: "globalMargin",
+  themeSpacing: {
+    mode: "margin",
+    default: {
+      base: {
+        top: "0",
+        right: "0",
+        bottom: "0",
+        left: "0",
+      },
+    },
+  },
+};
+
+export default Margin;

package/controls/Spacing/Padding.js

@@ -0,0 +1,17 @@
+const Padding = {
+  title: "Padding",
+  id: "globalPadding",
+  themeSpacing: {
+    mode: "padding",
+    default: {
+      base: {
+        top: "0",
+        right: "0",
+        bottom: "0",
+        left: "0",
+      },
+    },
+  },
+};
+
+export default Padding;

package/controls/Spacing/Spacing.js

@@ -0,0 +1,23 @@
+const Spacing = [
+  {
+    title: "Margin & Padding",
+    heading: {}
+  },
+  {
+    title: "Enable",
+    id: "globalSpacingEnabled",
+    switch: {
+      default: false
+    }
+  },
+  {
+    visible: "globalSpacingEnabled == true",
+    globalControl: "Margin"
+  },
+  {
+    visible: "globalSpacingEnabled == true",
+    globalControl: "Padding"
+  }
+];
+
+export default Spacing;

package/controls/Spacing/SpacingButton.js

@@ -0,0 +1,42 @@
+const SpacingButton = [
+  {
+    title: "Margin & Padding",
+    heading: {}
+  },
+  {
+    title: "Enable",
+    id: "globalSpacingEnabled",
+    switch: {
+      default: true
+    }
+  },
+  {
+    visible: "globalSpacingEnabled == true",
+    globalControl: "Margin",
+    default: {
+      base: {
+        top: "0",
+        right: "auto",
+        bottom: "0",
+        left: "auto",
+        linkHorizontal: true,
+      }
+    }
+  },
+  {
+    visible: "globalSpacingEnabled == true",
+    globalControl: "Padding",
+    default: {
+      base: {
+        top: "2",
+        right: "3.5",
+        bottom: "2",
+        left: "3.5",
+        linkHorizontal: true,
+        linkVertical: true,
+      }
+    }
+  }
+];
+
+export default SpacingButton;

package/controls/Spacing/SpacingContainer.js

@@ -0,0 +1,32 @@
+const SpacingContainer = [
+  {
+    title: "Margin & Padding",
+    heading: {}
+  },
+  {
+    title: "Enable",
+    id: "globalSpacingEnabled",
+    switch: {
+      default: true
+    }
+  },
+  {
+    visible: "globalSpacingEnabled == true",
+    globalControl: "Margin",
+    default: {
+      base: {
+        top: "0",
+        right: "auto",
+        bottom: "0",
+        left: "auto",
+        linkHorizontal: true,
+      }
+    }
+  },
+  {
+    visible: "globalSpacingEnabled == true",
+    globalControl: "Padding"
+  }
+];
+
+export default SpacingContainer;

package/controls/Spacing/SpacingInput.js

@@ -0,0 +1,42 @@
+const SpacingInput = [
+  {
+    title: "Margin & Padding",
+    heading: {}
+  },
+  {
+    title: "Enable",
+    id: "globalSpacingEnabled",
+    switch: {
+      default: true
+    }
+  },
+  {
+    visible: "globalSpacingEnabled == true",
+    globalControl: "Margin",
+    default: {
+      base: {
+        top: "0",
+        right: "0",
+        bottom: "0",
+        left: "0",
+        linkHorizontal: true,
+      }
+    }
+  },
+  {
+    visible: "globalSpacingEnabled == true",
+    globalControl: "Padding",
+    default: {
+      base: {
+        top: "2",
+        right: "3.5",
+        bottom: "2",
+        left: "3.5",
+        linkHorizontal: true,
+        linkVertical: true,
+      }
+    }
+  }
+];
+
+export default SpacingInput;

package/controls/Transforms/Rotate.js

@@ -0,0 +1,13 @@
+const Rotate = [
+  {
+    title: "Rotate",
+    id: "globalTransformRotate",
+    format: "rotate-[{{value}}deg]",
+    number: {
+      default: 0,
+      subtitle: "in degrees",
+    },
+  },
+];
+
+export default Rotate;

package/controls/Transforms/Scale.js

@@ -0,0 +1,13 @@
+const Scale = [
+  {
+    title: "Scale",
+    id: "globalTransformScale",
+    format: "scale-[{{value}}%]",
+    number: {
+      default: 100,
+      subtitle: "%",
+    },
+  },
+];
+
+export default Scale;

package/controls/Transforms/Skew.js

@@ -0,0 +1,25 @@
+const Skew = [
+  {
+    title: "Skew",
+    heading: {}
+  },
+  {
+    title: "Horizontal",
+    id: "globalTransformSkewX",
+    format: "skew-x-[{{value}}deg]",
+    number: {
+      default: 0,
+    },
+  },
+  {
+    title: "Vertical",
+    id: "globalTransformSkewY",
+    format: "skew-y-[{{value}}deg]",
+    number: {
+      default: 0,
+      subtitle: "in degrees",
+    },
+  },
+];
+
+export default Skew;

package/controls/Transforms/TransformOrigin.js

@@ -0,0 +1,12 @@
+const TransformOrigin = [
+  {
+    title: "Origin",
+    id: "globalTransformOrigin",
+    format: "origin-{{value}}",
+    select: {
+      use: "TransformOrigins",
+    }
+  }
+];
+
+export default TransformOrigin;

package/controls/Transforms/Transforms.js

@@ -0,0 +1,98 @@
+const Transforms = [
+    {
+        globalControl: "ControlType",
+        id: "{{value}}Transforms",
+    },
+    {
+        visible: "globalControlTypeTransforms == 'hover'",
+        globalControl: "HoverGroup",
+        id: "{{value}}Transforms",
+    },
+    {
+        visible:
+            "globalControlTypeTransforms == 'hover' && globalHoverGroupTransforms == 'custom'",
+        title: "ID",
+        id: "globalHoverGroupCustomIdTransforms",
+        text: {},
+    },
+    {
+        visible: "globalHoverGroupTransforms == 'custom'",
+        title: "The ID of the parent element to trigger the transforms.",
+        information: {},
+    },
+    {
+        visible:
+            "globalControlTypeTransforms != 'none' && globalControlTypeTransforms != 'static'",
+        title: "State",
+        id: "globalTransformsState",
+        responsive: false,
+        segmented: {
+            default: "start",
+            items: [
+                {
+                    title: "Start",
+                    value: "start",
+                },
+                {
+                    title: "End",
+                    value: "end",
+                },
+            ],
+        },
+    },
+    {
+        visible: "globalControlTypeTransforms != 'none'",
+        divider: {},
+    },
+    {
+        visible: "globalControlTypeTransforms != 'none'",
+        globalControl: "TransformOrigin",
+    },
+    {
+        visible:
+            "globalControlTypeTransforms == 'static' || (globalControlTypeTransforms == 'hover' && globalTransformsState == 'start')",
+        globalControl: "Scale",
+    },
+    {
+        visible:
+            "globalControlTypeTransforms == 'static' || (globalControlTypeTransforms == 'hover' && globalTransformsState == 'start')",
+        globalControl: "Rotate",
+    },
+    {
+        visible:
+            "globalControlTypeTransforms == 'static' || (globalControlTypeTransforms == 'hover' && globalTransformsState == 'start')",
+        globalControl: "Translate",
+    },
+    {
+        visible:
+            "globalControlTypeTransforms == 'static' || (globalControlTypeTransforms == 'hover' && globalTransformsState == 'start')",
+        globalControl: "Skew",
+    },
+
+    {
+        visible:
+            "(globalControlTypeTransforms == 'hover' && globalTransformsState == 'end')",
+        globalControl: "Scale",
+        id: "{{value}}End",
+    },
+    {
+        visible:
+            "(globalControlTypeTransforms == 'hover' && globalTransformsState == 'end')",
+        globalControl: "Rotate",
+        id: "{{value}}End",
+    },
+    {
+        visible:
+            "(globalControlTypeTransforms == 'hover' && globalTransformsState == 'end')",
+        globalControl: "Translate",
+        id: "{{value}}End",
+    },
+    {
+        visible:
+            "(globalControlTypeTransforms == 'hover' && globalTransformsState == 'end')",
+        globalControl: "Skew",
+        id: "{{value}}End",
+    },
+];
+
+export default Transforms;

package/controls/Transforms/Translate.js

@@ -0,0 +1,26 @@
+const Translate = [
+  {
+    title: "Translate",
+    heading: {},
+  },
+  {
+    title: "Horizontal",
+    id: "globalTransformTranslateX",
+    format: "translate-x-[{{value}}]",
+    text: {
+      default: "0px",
+      base: "0px",
+    },
+  },
+  {
+    title: "Vertical",
+    id: "globalTransformTranslateY",
+    format: "translate-y-[{{value}}]",
+    text: {
+      default: "0px",
+      subtitle: "Use valid CSS values. 10px, 50%, 10vw.",
+    }
+  },
+];
+
+export default Translate;

package/controls/Transitions/Delay.js

@@ -0,0 +1,13 @@
+const Delay = [
+  {
+    visible: "globalTransitionsProperty != 'none'",
+    title: "Delay",
+    id: "globalTransitionsDelay",
+    format: "delay-[{{value}}ms]",
+    number: {
+      default: 0,
+    },
+  },
+];
+
+export default Delay;

package/controls/Transitions/Duration.js

@@ -0,0 +1,13 @@
+const Duration = [
+  {
+    visible: "globalTransitionsProperty != 'none'",
+    title: "Duration",
+    id: "globalTransitionsDuration",
+    format: "duration-[{{value}}ms]",
+    number: {
+      default: 300,
+    },
+  },
+];
+
+export default Duration;

package/controls/Transitions/Property.js

@@ -0,0 +1,42 @@
+const Property = [
+  {
+    title: "Apply to",
+    id: "globalTransitionsProperty",
+    format: "transition-{{value}}",
+    select: {
+      default: "all",
+      items: [
+        {
+          title: "None",
+          value: "none",
+        },
+        {
+          title: "All",
+          value: "all",
+        },
+        {
+          title: "Most Common",
+          value: "default",
+        },
+        {
+          title: "Colors",
+          value: "colors",
+        },
+        {
+          title: "Opacity",
+          value: "opacity",
+        },
+        {
+          title: "Shadows",
+          value: "shadow",
+        },
+        {
+          title: "Transforms",
+          value: "transform",
+        },
+      ],
+    },
+  },
+];
+
+export default Property;

package/controls/Transitions/TimingFunction.js

@@ -0,0 +1,44 @@
+const TimingFunction = [
+  {
+    visible: "globalTransitionsProperty != 'none'",
+    title: "Function",
+    id: "globalTransitionsTimingFunction",
+    select: {
+      default: "ease-in-out",
+      items: [
+        {
+          title: "Custom",
+          value: "custom",
+        },
+        {
+          title: "Linear",
+          value: "linear",
+        },
+        {
+          title: "Ease-in",
+          value: "ease-in",
+        },
+        {
+          title: "Ease-out",
+          value: "ease-out",
+        },
+        {
+          title: "Ease-in-out",
+          value: "ease-in-out",
+        },
+      ],
+    },
+  },
+  {
+    visible: "globalTransitionsTimingFunction == 'custom'",
+    title: "Cubic Bezier",
+    id: "globalTransitionsTimingFunctionCustom",
+    format: "ease-[cubic-bezier({{value}})]",
+    input: {
+      default: "0.95,0.05,0.795,0.035",
+      subtitle: "x1, y1, x2, y2",
+    }
+  },
+];
+
+export default TimingFunction;

package/controls/Transitions/Transitions.js

@@ -0,0 +1,20 @@
+const Transitions = [
+  {
+    globalControl: "Property",
+  },
+  {
+    globalControl: "TimingFunction",
+  },
+  {
+    heading: {},
+    title: "Timing",
+  },
+  {
+    globalControl: "Duration",
+  },
+  {
+    globalControl: "Delay",
+  },
+];
+
+export default Transitions;