rw-elements-tools 1.2.0

package/controls/Overlay/Image.js

@@ -0,0 +1,226 @@
+export const Image = [
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'image' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'image')",
+    title: "Image",
+    id: "globalOverlayImageResource",
+    resource: {},
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'image' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'image')",
+    title: "Position",
+    heading: {},
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'image' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'image')",
+    title: "Horizontal",
+    id: "globalOverlayImagePositionX",
+    segmented: {
+      default: "center",
+      items: [
+        {
+          value: "left",
+          title: "Left",
+        },
+        {
+          value: "center",
+          title: "Center",
+        },
+        {
+          value: "right",
+          title: "Right",
+        },
+      ],
+    },
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'image' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'image')",
+    title: "Vertical",
+    id: "globalOverlayImagePositionY",
+    segmented: {
+      default: "center",
+      items: [
+        {
+          value: "top",
+          title: "Top",
+        },
+        {
+          value: "center",
+          title: "Middle",
+          default: true,
+        },
+        {
+          value: "bottom",
+          title: "Bottom",
+        },
+      ],
+    },
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'image' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'image')",
+    title: "Sizing",
+    heading: {},
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'image' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'image')",
+    title: "Size",
+    id: "globalOverlayImageSize",
+    format: "bg-{{value}}",
+    select: {
+      default: "cover",
+      items: [
+        {
+          title: "Auto",
+          value: "auto",
+        },
+        {
+          title: "Cover",
+          value: "cover",
+        },
+        {
+          title: "Contain",
+          value: "contain",
+        },
+      ],
+    },
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'image' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'image')",
+    title: "Repeat",
+    id: "globalOverlayImageRepeat",
+    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",
+        },
+      ],
+    },
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'image')",
+    title: "Image",
+    id: "globalOverlayImageResourceEnd",
+    resource: {},
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'image')",
+    title: "Position",
+    heading: {},
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'image')",
+    title: "Horizontal",
+    id: "globalOverlayImagePositionXEnd",
+    segmented: {
+      default: "center",
+      items: [
+        {
+          value: "left",
+          title: "Left",
+        },
+        {
+          value: "center",
+          title: "Center",
+        },
+        {
+          value: "right",
+          title: "Right",
+        },
+      ],
+    },
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'image')",
+    title: "Vertical",
+    id: "globalOverlayImagePositionYEnd",
+    segmented: {
+      default: "center",
+      items: [
+        {
+          value: "top",
+          title: "Top",
+        },
+        {
+          value: "center",
+          title: "Middle",
+          default: true,
+        },
+        {
+          value: "bottom",
+          title: "Bottom",
+        },
+      ],
+    },
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'image')",
+    title: "Sizing",
+    heading: {},
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'image')",
+    title: "Size",
+    id: "globalOverlayImageSizeEnd",
+    format: "bg-{{value}}",
+    select: {
+      default: "cover",
+      items: [
+        {
+          title: "Auto",
+          value: "auto",
+        },
+        {
+          title: "Cover",
+          value: "cover",
+        },
+        {
+          title: "Contain",
+          value: "contain",
+        },
+      ],
+    },
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'image')",
+    title: "Repeat",
+    id: "globalOverlayImageRepeatEnd",
+    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 Image;

package/controls/Overlay/Overlay.js

@@ -0,0 +1,66 @@
+const Overlay = [
+  {
+    globalControl: "ControlType",
+    id: "{{value}}Overlay",
+    segmented: {
+      default: "none",
+    },
+  },
+  {
+    visible: "globalControlTypeOverlay != 'none'",
+    title: "Style",
+    id: "globalOverlayType",
+    responsive: false,
+    segmented: {
+      default: "color",
+      items: [
+        {
+          icon: "paintbrush",
+          value: "color",
+        },
+        {
+          icon: "photo",
+          value: "image",
+        },
+        {
+          icon: "swatchpalette",
+          value: "gradient",
+        },
+      ],
+    },
+  },
+  {
+    visible: "globalControlTypeOverlay != 'none' && globalControlTypeOverlay != 'static'",
+    title: "State",
+    id: "globalOverlayState",
+    responsive: false,
+    segmented: {
+      default: "start",
+      items: [
+        {
+          title: "Start",
+          value: "start",
+        },
+        {
+          title: "End",
+          value: "end",
+        },
+      ]
+    }
+  },
+  {
+    visible: "globalControlTypeOverlay != 'none'",
+    divider: {},
+  },
+  {
+    globalControl: "Overlay_Color",
+  },
+  {
+    globalControl: "Overlay_Gradient",
+  },
+  {
+    globalControl: "Overlay_Image",
+  }
+];
+
+export default Overlay;

package/controls/Sizing/Height.js

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

package/controls/Sizing/MaxHeight.js

@@ -0,0 +1,17 @@
+const MaxHeight = [{
+  title: "Max Height",
+  id: "globalMaxHeight",
+  format: "max-h-{{value}}",
+  themeSpacing: {
+    mode: "single",
+    default: {
+      base: {
+        custom: false,
+        value: "auto"
+      }
+    }
+  }
+}
+];
+
+export default MaxHeight;

package/controls/Sizing/MaxWidth.js

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

package/controls/Sizing/MinHeight.js

@@ -0,0 +1,18 @@
+const MinHeight = [
+  {
+    title: "Min Height",
+    id: "globalMinHeight",
+    format: "min-h-{{value}}",
+    themeSpacing: {
+      mode: "single",
+      default: {
+        base: {
+          custom: false,
+          value: "0"
+        }
+      }
+    }
+  }
+];
+
+export default MinHeight;

package/controls/Sizing/MinWidth.js

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

package/controls/Sizing/Sizing.js

@@ -0,0 +1,66 @@
+const Sizing = [
+  {
+    title: "Size",
+    heading: {}
+  },
+  {
+    globalControl: "Width"
+  },
+  {
+    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 Sizing;

package/controls/Sizing/SizingContainer.js

@@ -0,0 +1,122 @@
+const SizingContainer = [
+  {
+    title: "Size",
+    heading: {}
+  },
+  {
+    title: "Width",
+    id: "globalWidthType",
+    responsive: false,
+    select: {
+      default: "full",
+      items: [
+        {
+          title: "Auto",
+          value: "auto"
+        },
+        {
+          title: "Full",
+          value: "full"
+        },
+        {
+          title: "Screen",
+          value: "screen"
+        },
+        {
+          title: "Breakpoint",
+          value: "container"
+        },
+        {
+          title: "Theme Spacing",
+          value: "theme"
+        }
+      ]
+    }
+  },
+  {
+    visible: "globalWidthType == 'theme'",
+    globalControl: "Width",
+    title: ""
+  },
+  {
+    title: "Height",
+    id: "globalHeightType",
+    responsive: false,
+    select: {
+      default: "auto",
+      items: [
+        {
+          title: "Auto",
+          value: "auto"
+        },
+        {
+          title: "Full",
+          value: "full"
+        },
+        {
+          title: "Screen",
+          value: "screen"
+        },
+        {
+          title: "Theme",
+          value: "theme"
+        }
+      ]
+    }
+  },
+  {
+    visible: "globalHeightType == 'theme'",
+    globalControl: "Height",
+    title: ""
+  },
+  {
+    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 SizingContainer;

package/controls/Sizing/SizingImage.js

@@ -0,0 +1,75 @@
+const Sizing = [
+  {
+    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",
+    divider: {}
+  },
+  {
+    visible: "globalSizingMinMaxEnabled == true",
+    title: "Height",
+    heading: {}
+  },
+  {
+    visible: "globalSizingMinMaxEnabled == true",
+    title: "Min",
+    globalControl: "MinHeight"
+  },
+  {
+    visible: "globalSizingMinMaxEnabled == true",
+    title: "Max",
+    globalControl: "MaxHeight"
+  }
+]
+
+export default Sizing;