rw-elements-tools 1.2.0

package/controls/Layout/Isolation.js

@@ -0,0 +1,25 @@
+const LayoutIsolation = [
+  {
+    title: "Isolation",
+    id: "globalLayoutIsolation",
+    segmented: {
+      default: "",
+      items: [
+        {
+          title: "None",
+          value: "",
+        },
+        {
+          title: "Isolate",
+          value: "isolate",
+        },
+        {
+          title: "Auto",
+          value: "isolate-auto",
+        },
+      ],
+    },
+  },
+];
+
+export default LayoutIsolation;

package/controls/Layout/Layout.js

@@ -0,0 +1,38 @@
+const Layout = [
+
+  {
+    title: "General",
+    heading: {}
+  },
+  {
+    globalControl: "Position",
+  },
+  {
+    globalControl: "ZIndex",
+  },
+  {
+    globalControl: "TopRightBottomLeft",
+  },
+  {
+    heading: {},
+    title: "Display",
+  },
+  {
+    globalControl: "Hidden",
+  },
+  {
+    globalControl: "Visibility",
+  },
+  {
+    heading: {},
+    title: "Advanced",
+  },
+  {
+    globalControl: "Overflow",
+  },
+  {
+    globalControl: "Isolation",
+  },
+];
+
+export default Layout;

package/controls/Layout/Overflow.js

@@ -0,0 +1,33 @@
+const LayoutOverflow = [
+  {
+    title: "Overflow",
+    id: "globalLayoutOverflow",
+    select: {
+      default: "",
+      items: [
+        {
+          title: "None",
+          value: "",
+        },
+        {
+          title: "Visible",
+          value: "overflow-visible",
+        },
+        {
+          title: "Hidden",
+          value: "overflow-hidden",
+        },
+        {
+          title: "Scroll",
+          value: "overflow-scroll",
+        },
+        {
+          title: "Auto",
+          value: "overflow-auto",
+        },
+      ],
+    },
+  },
+];
+
+export default LayoutOverflow;

package/controls/Layout/Position.js

@@ -0,0 +1,37 @@
+const LayoutPosition = [
+  {
+    title: "Position",
+    id: "globalLayoutPosition",
+    select: {
+      default: "",
+      items: [
+        {
+          title: "None",
+          value: "",
+        },
+        {
+          title: "Static",
+          value: "static",
+        },
+        {
+          title: "Relative",
+          value: "relative",
+        },
+        {
+          title: "Absolute",
+          value: "absolute",
+        },
+        {
+          title: "Fixed",
+          value: "fixed",
+        },
+        {
+          title: "Sticky",
+          value: "sticky",
+        },
+      ],
+    },
+  },
+];
+
+export default LayoutPosition;

package/controls/Layout/TopRightBottomLeft.js

@@ -0,0 +1,90 @@
+const LayoutTopRightBottomLeft = [
+  {
+    title: "Top / Right / Bottom / Left",
+    heading: {}
+  },
+  {
+    title: "Type",
+    id: "globalLayoutTopRightBottomLeftType",
+    segmented: {
+      default: "none",
+      items: [
+        {
+          title: "None",
+          value: "none",
+        },
+        {
+          title: "Uniform",
+          value: "uniform",
+        },
+        {
+          title: "Individual",
+          value: "individual",
+        },
+      ],
+    },
+  },
+  {
+    visible: "globalLayoutTopRightBottomLeftType == 'uniform'",
+    title: "Inset",
+    globalControl: "Inset",
+  },
+  {
+    visible: "globalLayoutTopRightBottomLeftType == 'individual'",
+    title: "Top",
+    id: "globalLayoutTop",
+    format: "top-{{value}}",
+    themeSpacing: {
+      mode: "single",
+      default: {
+        base: {
+          value: 0,
+        }
+      },
+    }
+  },
+  {
+    visible: "globalLayoutTopRightBottomLeftType == 'individual'",
+    title: "Right",
+    id: "globalLayoutRight",
+    format: "right-{{value}}",
+    themeSpacing: {
+      mode: "single",
+      default: {
+        base: {
+          value: 0,
+        }
+      },
+    }
+  },
+  {
+    visible: "globalLayoutTopRightBottomLeftType == 'individual'",
+    title: "Bottom",
+    id: "globalLayoutBottom",
+    format: "bottom-{{value}}",
+    themeSpacing: {
+      mode: "single",
+      default: {
+        base: {
+          value: 0,
+        }
+      },
+    }
+  },
+  {
+    visible: "globalLayoutTopRightBottomLeftType == 'individual'",
+    title: "Left",
+    id: "globalLayoutLeft",
+    format: "left-{{value}}",
+    themeSpacing: {
+      mode: "single",
+      default: {
+        base: {
+          value: 0,
+        }
+      },
+    }
+  },
+];
+
+export default LayoutTopRightBottomLeft;

package/controls/Layout/Visibility.js

@@ -0,0 +1,25 @@
+const LayoutVisibility = [
+  {
+    title: "Visibility",
+    id: "globalLayoutVisibility",
+    select: {
+      default: "",
+      items: [
+        {
+          title: "Auto",
+          value: "",
+        },
+        {
+          title: "Visible",
+          value: "visible",
+        },
+        {
+          title: "Invisible",
+          value: "invisible",
+        }
+      ],
+    },
+  },
+];
+
+export default LayoutVisibility;

package/controls/Layout/ZIndex.js

@@ -0,0 +1,36 @@
+const LayoutZIndex = [
+  {
+    title: "Z-Index",
+    id: "globalLayoutZIndexType",
+    responsive: false,
+    segmented: {
+      default: "",
+      items: [
+        {
+          title: "None",
+          value: "",
+        },
+        {
+          title: "Auto",
+          value: "z-auto",
+        },
+        {
+          title: "Custom",
+          value: "custom",
+        },
+      ],
+    },
+  },
+  {
+    visible: "globalLayoutZIndexType == 'custom'",
+    title: "",
+    id: "globalLayoutZIndex",
+    format: "z-[{{value}}]",
+    number: {
+      default: 0,
+      subtitle: "Can be positive or negative.",
+    },
+  },
+];
+
+export default LayoutZIndex;

package/controls/Overlay/Color.js

@@ -0,0 +1,52 @@
+const Color = [
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'color' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'color')",
+    title: "Color",
+    id: "globalOverlayColor",
+    format: "bg-{{value}}",
+    themeColor: {
+      default: {
+        name: "surface",
+        brightness: 50,
+      },
+    },
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'color' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'color')",
+    title: "Opacity",
+    id: "globalOverlayColorOpacity",
+    format: "bg-opacity-[{{value}}%]",
+    responsive: false,
+    slider: {
+      default: 100,
+      use: "Slider",
+      units: "%",
+    },
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'color')",
+    title: "Color",
+    id: "globalOverlayColorEnd",
+    format: "bg-{{value}}",
+    themeColor: {
+      default: {
+        name: "surface",
+        brightness: 50,
+      },
+    },
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'color')",
+    title: "Opacity",
+    id: "globalOverlayColorOpacityEnd",
+    format: "bg-opacity-[{{value}}%]",
+    responsive: false,
+    slider: {
+      default: 100,
+      use: "Slider",
+      units: "%",
+    },
+  },
+];
+
+export default Color;

package/controls/Overlay/Gradient.js

@@ -0,0 +1,298 @@
+const Gradient = [
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'gradient' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'gradient')",
+    title: "Direction",
+    id: "globalOverlayGradientDirection",
+    select: {
+      use: "GradientDirection",
+    },
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'gradient' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'gradient')",
+    heading: {},
+    title: "From",
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'gradient' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'gradient')",
+    title: "Color",
+    id: "globalOverlayGradientFromColor",
+    format: "from-{{value}}",
+    themeColor: {
+      default: {
+        name: "brand",
+        brightness: 200,
+      },
+    },
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'gradient' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'gradient')",
+    title: "Opacity",
+    id: "globalOverlayGradientFromOpacity",
+    format: "[{{value}}%]",
+    responsive: false,
+    slider: {
+      use: "Slider",
+      units: "%",
+      default: 100,
+    },
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'gradient' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'gradient')",
+    title: "Position",
+    id: "globalOverlayGradientFromPosition",
+    format: "from-[{{value}}%]",
+    responsive: false,
+    slider: {
+      use: "Slider",
+      units: "%",
+      default: 0,
+    },
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'gradient' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'gradient')",
+    divider: {},
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'gradient' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'gradient')",
+    title: "Add Via",
+    id: "globalOverlayGradientViaEnabled",
+    switch: {
+      default: false,
+    },
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'gradient' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'gradient') && globalOverlayGradientViaEnabled == true",
+    heading: {},
+    title: "Via",
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'gradient' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'gradient') && globalOverlayGradientViaEnabled == true",
+    title: "Color",
+    id: "globalOverlayGradientViaColor",
+    format: "via-{{value}}",
+    themeColor: {
+      default: {
+        name: "brand",
+        brightness: 400,
+      },
+    },
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'gradient' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'gradient') && globalOverlayGradientViaEnabled == true",
+    title: "Opacity",
+    id: "globalOverlayGradientViaOpacity",
+    format: "[{{value}}%]",
+    responsive: false,
+    slider: {
+      use: "Slider",
+      units: "%",
+      default: 100,
+    },
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'gradient' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'gradient') && globalOverlayGradientViaEnabled == true",
+    title: "Position",
+    id: "globalOverlayGradientViaPosition",
+    format: "via-[{{value}}%]",
+    responsive: false,
+    slider: {
+      default: 50,
+      use: "Slider",
+      units: "%",
+    },
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'gradient' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'gradient')",
+    divider: {},
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'gradient' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'gradient')",
+    heading: {},
+    title: "To",
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'gradient' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'gradient')",
+    title: "Color",
+    id: "globalOverlayGradientToColor",
+    format: "to-{{value}}",
+    themeColor: {
+      default: {
+        name: "brand",
+        brightness: 500,
+      },
+    },
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'gradient' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'gradient')",
+    title: "Opacity",
+    id: "globalOverlayGradientToOpacity",
+    format: "[{{value}}%]",
+    responsive: false,
+    slider: {
+      use: "Slider",
+      units: "%",
+      default: 100,
+    },
+  },
+  {
+    visible: "globalControlTypeOverlay == 'static' && globalOverlayType == 'gradient' || (globalControlTypeOverlay == 'hover' && globalOverlayState == 'start' && globalOverlayType == 'gradient')",
+    title: "Position",
+    id: "globalOverlayGradientToPosition",
+    format: "to-[{{value}}%]",
+    responsive: false,
+    slider: {
+      use: "Slider",
+      units: "%",
+      default: 100,
+    },
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'gradient')",
+    title: "Direction",
+    id: "globalOverlayGradientDirectionEnd",
+    select: {
+      use: "GradientDirection",
+    },
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'gradient')",
+    title: "From",
+    heading: {}
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'gradient')",
+    title: "Color",
+    id: "globalOverlayGradientFromColorEnd",
+    format: "from-{{value}}",
+    themeColor: {
+      default: {
+        name: "brand",
+        brightness: 200,
+      },
+    },
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'gradient')",
+    title: "Opacity",
+    id: "globalOverlayGradientFromOpacityEnd",
+    format: "[{{value}}%]",
+    responsive: false,
+    slider: {
+      use: "Slider",
+      units: "%",
+      default: 100,
+    },
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'gradient')",
+    title: "Position",
+    id: "globalOverlayGradientFromPositionEnd",
+    format: "from-[{{value}}%]",
+    responsive: false,
+    slider: {
+      use: "Slider",
+      units: "%",
+      default: 0,
+    },
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'gradient')",
+    divider: {},
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'gradient')",
+    title: "Add Via",
+    id: "globalOverlayGradientViaEnabledEnd",
+    switch: {
+      default: false,
+    },
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'gradient') && globalOverlayGradientViaEnabledEnd == true",
+    heading: {},
+    title: "Via",
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'gradient') && globalOverlayGradientViaEnabledEnd == true",
+    title: "Color",
+    id: "globalOverlayGradientViaColorEnd",
+    format: "via-{{value}}",
+    themeColor: {
+      default: {
+        name: "brand",
+        brightness: 400,
+      },
+    },
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'gradient') && globalOverlayGradientViaEnabledEnd == true",
+    title: "Opacity",
+    id: "globalOverlayGradientViaOpacityEnd",
+    format: "[{{value}}%]",
+    responsive: false,
+    slider: {
+      use: "Slider",
+      units: "%",
+      default: 100,
+    },
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'gradient') && globalOverlayGradientViaEnabledEnd == true",
+    title: "Position",
+    id: "globalOverlayGradientViaPositionEnd",
+    format: "via-[{{value}}%]",
+    responsive: false,
+    slider: {
+      default: 50,
+      use: "Slider",
+      units: "%",
+    },
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'gradient')",
+    divider: {},
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'gradient')",
+    heading: {},
+    title: "To",
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'gradient')",
+    title: "Color",
+    id: "globalOverlayGradientToColorEnd",
+    format: "to-{{value}}",
+    themeColor: {
+      default: {
+        name: "brand",
+        brightness: 500,
+      },
+    },
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'gradient')",
+    title: "Opacity",
+    id: "globalOverlayGradientToOpacityEnd",
+    format: "[{{value}}%]",
+    responsive: false,
+    slider: {
+      use: "Slider",
+      units: "%",
+      default: 100,
+    },
+  },
+  {
+    visible: "(globalControlTypeOverlay == 'hover' && globalOverlayState == 'end' && globalOverlayType == 'gradient')",
+    title: "Position",
+    id: "globalOverlayGradientToPositionEnd",
+    format: "to-[{{value}}%]",
+    responsive: false,
+    slider: {
+      use: "Slider",
+      units: "%",
+      default: 100,
+    },
+  },
+];
+
+export default Gradient;