rw-elements-tools 1.2.0

package/controls/Background/Background.js

@@ -0,0 +1,66 @@
+const Background = [
+  {
+    globalControl: "ControlType",
+    id: "{{value}}Bg",
+    segmented: {
+      default: "static",
+    },
+  },
+  {
+    visible: "globalControlTypeBg != 'none'",
+    title: "Style",
+    id: "globalBgType",
+    responsive: false,
+    segmented: {
+      default: "color",
+      items: [
+        {
+          icon: "paintbrush",
+          value: "color",
+        },
+        {
+          icon: "photo",
+          value: "image",
+        },
+        {
+          icon: "swatchpalette",
+          value: "gradient",
+        },
+      ],
+    },
+  },
+  {
+    visible: "globalControlTypeBg != 'none' && globalControlTypeBg != 'static'",
+    title: "State",
+    id: "globalBgState",
+    responsive: false,
+    segmented: {
+      default: "start",
+      items: [
+        {
+          title: "Start",
+          value: "start",
+        },
+        {
+          title: "End",
+          value: "end",
+        },
+      ]
+    }
+  },
+  {
+    visible: "globalControlTypeBg != 'none'",
+    divider: {},
+  },
+  {
+    globalControl: "Background_Color",
+  },
+  {
+    globalControl: "Background_Gradient",
+  },
+  {
+    globalControl: "Background_Image",
+  },
+];
+
+export default Background;

package/controls/Background/BackgroundButton.js

@@ -0,0 +1,69 @@
+const BackgroundButton = [
+  {
+    globalControl: "ControlType",
+    id: "{{value}}Bg",
+    segmented: {
+      default: "hover",
+    },
+  },
+  {
+    title: "Style",
+    id: "globalBgType",
+    responsive: false,
+    segmented: {
+      default: "color",
+      items: [
+        {
+          icon: "paintbrush",
+          value: "color",
+        },
+        {
+          icon: "photo",
+          value: "image",
+        },
+        {
+          icon: "swatchpalette",
+          value: "gradient",
+        },
+      ],
+    },
+  },
+  {
+    visible: "globalControlTypeBg != 'none' && globalControlTypeBg != 'static'",
+    title: "State",
+    id: "globalBgState",
+    responsive: false,
+    segmented: {
+      default: "start",
+      items: [
+        {
+          title: "Start",
+          value: "start",
+        },
+        {
+          title: "End",
+          value: "end",
+        },
+      ]
+    }
+  },
+  {
+    visible: "globalControlTypeBg != 'none'",
+    divider: {},
+  },
+  {
+    globalControl: "Background_Color",
+    default: {
+      name: "brand",
+      brightness: 500,
+    }
+  },
+  {
+    globalControl: "Background_Gradient",
+  },
+  {
+    globalControl: "Background_Image",
+  },
+];
+
+export default BackgroundButton;

package/controls/Background/BackgroundColor.js

@@ -0,0 +1,28 @@
+const BackgroundColor = [
+    {
+        visible: "bgType == 'color'",
+        title: "Color",
+        id: "bgColor",
+        format: "bg-{{value}}",
+        themeColor: {
+            default: {
+                name: "surface",
+                brightness: 900,
+            },
+        },
+    },
+    {
+        visible: "bgType == 'color'",
+        title: "Opacity",
+        id: "bgColorOpacity",
+        format: "bg-opacity-[{{value}}%]",
+        responsive: false,
+        slider: {
+            default: 100,
+            use: "Slider",
+            units: "%",
+        },
+    },
+];
+
+export default BackgroundColor;

package/controls/Background/BackgroundContainer.js

@@ -0,0 +1,73 @@
+const BackgroundTransparent = [
+  {
+    globalControl: "ControlType",
+    id: "{{value}}Bg",
+    segmented: {
+      default: "none",
+    },
+  },
+  {
+    visible: "globalControlTypeBg != 'none'",
+    title: "Style",
+    id: "globalBgType",
+    responsive: false,
+    segmented: {
+      default: "color",
+      items: [
+        {
+          icon: "paintbrush",
+          value: "color",
+        },
+        {
+          icon: "photo",
+          value: "image",
+        },
+        {
+          icon: "swatchpalette",
+          value: "gradient",
+        },
+        {
+          icon: "video",
+          value: "video",
+        },
+      ],
+    },
+  },
+  {
+    visible: "globalControlTypeBg != 'none' && globalControlTypeBg != 'static'",
+    title: "State",
+    id: "globalBgState",
+    responsive: false,
+    segmented: {
+      default: "start",
+      items: [
+        {
+          title: "Start",
+          value: "start",
+        },
+        {
+          title: "End",
+          value: "end",
+        },
+      ]
+    }
+  },
+  {
+    visible: "globalControlTypeBg != 'none'",
+    divider: {},
+  },
+  {
+    globalControl: "Background_Color",
+  },
+  {
+    globalControl: "Background_Gradient_Container",
+  },
+  {
+    globalControl: "Background_Image",
+  },
+  {
+    globalControl: "Background_Video",
+  },
+];
+
+export default BackgroundTransparent;

package/controls/Background/BackgroundGradient.js

@@ -0,0 +1,149 @@
+const BackgroundGadient = [
+    {
+        visible: "bgType == 'gradient'",
+        title: "Direction",
+        id: "bgGradientDirection",
+        select: {
+            use: "GradientDirection",
+        },
+    },
+    {
+        visible: "bgType == 'gradient'",
+        heading: {},
+        title: "From",
+    },
+    {
+        visible: "bgType == 'gradient'",
+        title: "Color",
+        id: "gradientFromColor",
+        format: "from-{{value}}",
+        themeColor: {
+            default: {
+                name: "brand",
+                brightness: 200,
+            },
+        },
+    },
+    {
+        visible: "bgType == 'gradient'",
+        title: "Opacity",
+        id: "gradientFromOpacity",
+        format: "[{{value}}%]",
+        responsive: false,
+        slider: {
+            use: "Slider",
+            units: "%",
+            default: 100,
+        },
+    },
+    {
+        visible: "bgType == 'gradient'",
+        title: "Position",
+        id: "gradientFromPosition",
+        format: "from-[{{value}}%]",
+        responsive: false,
+        slider: {
+            use: "Slider",
+            units: "%",
+            default: 0,
+        },
+    },
+    {
+        visible: "bgType == 'gradient'",
+        divider: {},
+    },
+    {
+        visible: "bgType == 'gradient'",
+        title: "Add Via",
+        id: "wantsGradientVia",
+        switch: {},
+    },
+    {
+        visible: "bgType == 'gradient' && wantsGradientVia == 'true'",
+        heading: {},
+        title: "Via",
+    },
+    {
+        visible: "bgType == 'gradient' && wantsGradientVia == 'true'",
+        title: "Color",
+        id: "gradientViaColor",
+        format: "via-{{value}}",
+        themeColor: {
+            default: {
+                name: "brand",
+                brightness: 400,
+            },
+        },
+    },
+    {
+        visible: "bgType == 'gradient' && wantsGradientVia == 'true'",
+        title: "Opacity",
+        id: "gradientViaOpacity",
+        format: "[{{value}}%]",
+        responsive: false,
+        slider: {
+            use: "Slider",
+            units: "%",
+            default: 100,
+        },
+    },
+    {
+        visible: "bgType == 'gradient' && wantsGradientVia == 'true'",
+        title: "Position",
+        id: "gradientViaPosition",
+        format: "via-[{{value}}%]",
+        responsive: false,
+        slider: {
+            default: 50,
+            use: "Slider",
+            units: "%",
+        },
+    },
+    {
+        visible: "bgType == 'gradient'",
+        divider: {},
+    },
+    {
+        visible: "bgType == 'gradient'",
+        heading: {},
+        title: "To",
+    },
+    {
+        visible: "bgType == 'gradient'",
+        title: "Color",
+        id: "gradientToColor",
+        format: "to-{{value}}",
+        themeColor: {
+            default: {
+                name: "brand",
+                brightness: 500,
+            },
+        },
+    },
+    {
+        visible: "bgType == 'gradient'",
+        title: "Opacity",
+        id: "gradientToOpacity",
+        format: "[{{value}}%]",
+        responsive: false,
+        slider: {
+            use: "Slider",
+            units: "%",
+            default: 100,
+        },
+    },
+    {
+        visible: "bgType == 'gradient'",
+        title: "Position",
+        id: "gradientToPosition",
+        format: "to-[{{value}}%]",
+        responsive: false,
+        slider: {
+            use: "Slider",
+            units: "%",
+            default: 100,
+        },
+    },
+];
+
+export default BackgroundGadient;

package/controls/Background/BackgroundImage.js

@@ -0,0 +1,108 @@
+export const BackgroundImage = [
+    {
+        title: "Image",
+        id: "bgImage",
+        resource: {},
+    },
+    {
+        title: "Position",
+        heading: {},
+    },
+    {
+        title: "Horizontal",
+        id: "bgImagePositionX",
+        segmented: {
+            default: "center",
+            items: [
+                {
+                    value: "left",
+                    title: "Left",
+                },
+                {
+                    value: "center",
+                    title: "Center",
+                    default: true,
+                },
+                {
+                    value: "right",
+                    title: "Right",
+                },
+            ],
+        },
+    },
+    {
+        title: "Vertical",
+        id: "bgImagePositionY",
+        segmented: {
+            default: "center",
+            items: [
+                {
+                    value: "top",
+                    title: "Top",
+                },
+                {
+                    value: "center",
+                    title: "Middle",
+                    default: true,
+                },
+                {
+                    value: "bottom",
+                    title: "Bottom",
+                },
+            ],
+        },
+    },
+    {
+        title: "Sizing",
+        heading: {},
+    },
+    {
+        title: "Size",
+        id: "bgImageSize",
+        select: {
+            default: "cover",
+            items: [
+                {
+                    title: "Auto",
+                    value: "auto",
+                },
+                {
+                    title: "Cover",
+                    value: "cover",
+                },
+                {
+                    title: "Contain",
+                    value: "contain",
+                },
+            ],
+        },
+    },
+    {
+        title: "Repeat",
+        id: "bgImageRepeat",
+        format: "bg-{{value}}",
+        select: {
+            default: "no-repeat",
+            items: [
+                {
+                    title: "No Repeat",
+                    value: "no-repeat",
+                },
+                {
+                    title: "Repeat",
+                    value: "repeat",
+                },
+                {
+                    title: "Repeat Horizontal",
+                    value: "repeat-x",
+                },
+                {
+                    title: "Repeat Vertical",
+                    value: "repeat-y",
+                },
+            ],
+        },
+    },
+];
+
+export default BackgroundImage;

package/controls/Background/BackgroundOnlyColor.js

@@ -0,0 +1,53 @@
+const BackgroundOnlyColor = [
+    {
+        globalControl: "ControlType",
+        id: "{{value}}Bg",
+        segmented: {
+          default: "static",
+        },
+    },
+    {
+        enable: "false",
+        visible: "false",
+        title: "Style",
+        id: "globalBgType",
+        responsive: false,
+        segmented: {
+          default: "color",
+          items: [
+            {
+              icon: "paintbrush",
+              value: "color",
+            }
+          ],
+        },
+    },
+    {
+        visible: "globalControlTypeBg != 'none' && globalControlTypeBg != 'static'",
+        title: "State",
+        id: "globalBgState",
+        responsive: false,
+        segmented: {
+          default: "start",
+          items: [
+            {
+              title: "Start",
+              value: "start",
+            },
+            {
+              title: "End",
+              value: "end",
+            },
+          ]
+        }
+    },
+    {
+        visible: "globalControlTypeBg != 'none'",
+        divider: {},
+    },
+    {
+        globalControl: "Background_Color",
+    },
+];
+
+export default BackgroundOnlyColor;

package/controls/Background/BackgroundTransparent.js

@@ -0,0 +1,66 @@
+const BackgroundTransparent = [
+  {
+    globalControl: "ControlType",
+    id: "{{value}}Bg",
+    segmented: {
+      default: "none",
+    },
+  },
+  {
+    visible: "globalControlTypeBg != 'none'",
+    title: "Style",
+    id: "globalBgType",
+    responsive: false,
+    segmented: {
+      default: "color",
+      items: [
+        {
+          icon: "paintbrush",
+          value: "color",
+        },
+        {
+          icon: "photo",
+          value: "image",
+        },
+        {
+          icon: "swatchpalette",
+          value: "gradient",
+        },
+      ],
+    },
+  },
+  {
+    visible: "globalControlTypeBg != 'none' && globalControlTypeBg != 'static'",
+    title: "State",
+    id: "globalBgState",
+    responsive: false,
+    segmented: {
+      default: "start",
+      items: [
+        {
+          title: "Start",
+          value: "start",
+        },
+        {
+          title: "End",
+          value: "end",
+        },
+      ]
+    }
+  },
+  {
+    visible: "globalControlTypeBg != 'none'",
+    divider: {},
+  },
+  {
+    globalControl: "Background_Color",
+  },
+  {
+    globalControl: "Background_Gradient",
+  },
+  {
+    globalControl: "Background_Image",
+  },
+];
+
+export default BackgroundTransparent;

package/controls/Background/BackgroundVideo.js

@@ -0,0 +1,9 @@
+export const BackgroundVideo = [
+    {
+        title: "Video",
+        id: "bgVideo",
+        resource: {},
+    },
+];
+
+export default BackgroundVideo;

package/controls/Background/Color.js

@@ -0,0 +1,52 @@
+const Color = [
+  {
+    visible: "globalControlTypeBg == 'static' && globalBgType == 'color' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'color')",
+    title: "Color",
+    id: "globalBgColor",
+    format: "bg-{{value}}",
+    themeColor: {
+      default: {
+        name: "surface",
+        brightness: 50,
+      },
+    },
+  },
+  {
+    visible: "globalControlTypeBg == 'static' && globalBgType == 'color' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'color')",
+    title: "Opacity",
+    id: "globalBgColorOpacity",
+    format: "bg-opacity-[{{value}}%]",
+    responsive: false,
+    slider: {
+      default: 100,
+      use: "Slider",
+      units: "%",
+    },
+  },
+  {
+    visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'color')",
+    title: "Color",
+    id: "globalBgColorEnd",
+    format: "hover:bg-{{value}}",
+    themeColor: {
+      default: {
+        name: "surface",
+        brightness: 50,
+      },
+    },
+  },
+  {
+    visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'color')",
+    title: "Opacity",
+    id: "globalBgColorOpacityEnd",
+    format: "hover:bg-opacity-[{{value}}%]",
+    responsive: false,
+    slider: {
+      default: 100,
+      use: "Slider",
+      units: "%",
+    },
+  },
+];
+
+export default Color;