rw-elements-tools 1.2.0

package/controls/Background/SVG.js

@@ -0,0 +1,235 @@
+export const SVG = [
+    {
+        visible:
+            "globalControlTypeBg == 'static' && globalBgType == 'svg' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'svg')",
+        title: "SVG",
+        id: "globalBgSVGResource",
+        resource: {},
+    },
+    {
+        visible:
+            "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'svg')",
+        title: "SVG",
+        id: "globalBgSVGResourceEnd",
+        resource: {},
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        title: "Color",
+        id: "globalBgSVGColor",
+        format: "text-{{value}} [&>svg]:fill-current",
+        themeColor: {
+            default: {
+                name: "surface",
+                brightness: 500,
+            },
+        },
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        title: "Opacity",
+        id: "globalBgSVGOpacity",
+        format: "opacity-[{{value}}%]",
+        slider: {
+            use: "Slider",
+            units: "%",
+            default: 100,
+        },
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        title: "Width",
+        heading: {},
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        title: "Fixed",
+        id: "globalBgSVGFixedWidth",
+        format: "[&>svg]:w-{{value}}",
+        themeSpacing: {
+            mode: "single",
+            default: {
+                base: {
+                    custom: true,
+                    value: "100%",
+                },
+            },
+        },
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        title: "Max",
+        id: "globalBgSVGMaxWidth",
+        format: "[&>svg]:max-w-{{value}}",
+        themeSpacing: {
+            mode: "single",
+            default: {
+                base: {
+                    custom: true,
+                    value: "100%",
+                },
+            },
+        },
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        title: "Min",
+        id: "globalBgSVGMinWidth",
+        format: "[&>svg]:min-w-{{value}}",
+        themeSpacing: {
+            mode: "single",
+            default: {
+                base: {
+                    value: "auto",
+                },
+            },
+        },
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        title: "Height",
+        heading: {},
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        title: "Fixed",
+        id: "globalBgSVGFixedHeight",
+        format: "[&>svg]:h-{{value}}",
+        themeSpacing: {
+            mode: "single",
+            default: {
+                base: {
+                    value: "auto",
+                },
+            },
+        },
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        title: "Max",
+        id: "globalBgSVGMaxHeight",
+        format: "[&>svg]:max-h-{{value}}",
+        themeSpacing: {
+            mode: "single",
+            default: {
+                base: {
+                    value: "auto",
+                },
+            },
+        },
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        title: "Min",
+        id: "globalBgSVGMinHeight",
+        format: "[&>svg]:min-h-{{value}}",
+        themeSpacing: {
+            mode: "single",
+            default: {
+                base: {
+                    value: "auto",
+                },
+            },
+        },
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        divider: {},
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        title: "Position",
+        heading: {},
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        title: "Top",
+        id: "globalBgSVGPositionTop",
+        format: "[&>svg]:top-{{value}}",
+        themeSpacing: {
+            mode: "single",
+            default: {
+                base: {
+                    value: "0",
+                },
+            },
+        },
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        title: "Right",
+        id: "globalBgSVGPositionRight",
+        format: "[&>svg]:right-{{value}}",
+        themeSpacing: {
+            mode: "single",
+            default: {
+                base: {
+                    value: "auto",
+                },
+            },
+        },
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        title: "Bottom",
+        id: "globalBgSVGPositionBottom",
+        format: "[&>svg]:bottom-{{value}}",
+        themeSpacing: {
+            mode: "single",
+            default: {
+                base: {
+                    value: "auto",
+                },
+            },
+        },
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        title: "Left",
+        id: "globalBgSVGPositionLeft",
+        format: "[&>svg]:left-{{value}}",
+        themeSpacing: {
+            mode: "single",
+            default: {
+                base: {
+                    value: "0",
+                },
+            },
+        },
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        title: "Translate",
+        heading: {},
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        title: "X",
+        id: "globalBgSVGTranslateX",
+        format: "[&>svg]:translate-x-{{value}}",
+        themeSpacing: {
+            mode: "single",
+            default: {
+                base: {
+                    value: "0",
+                },
+            },
+        },
+    },
+    {
+        visible: "globalBgType == 'svg'",
+        title: "Y",
+        id: "globalBgSVGTranslateY",
+        format: "[&>svg]:translate-y-{{value}}",
+        themeSpacing: {
+            mode: "single",
+            default: {
+                base: {
+                    value: "0",
+                },
+            },
+        },
+    },
+];
+
+export default SVG;

package/controls/Background/Video.js

@@ -0,0 +1,29 @@
+export const Video = [
+  {
+    visible: "globalBgType == 'video'",
+    title: "Video",
+    id: "globalBgVideo",
+    resource: {},
+  },
+  {
+    visible: "globalBgType == 'video'",
+    title: "Aspect Ratio",
+    heading: {}
+  },
+  {
+    visible: "globalBgType == 'video'",
+    title: "Enable",
+    responsive: false,
+    id: "globalBgVideoAspectRatio",
+    switch: {
+      default: true,
+    }
+  },
+  {
+    visible: "globalBgType == 'video'",
+    title: "This will force an aspect ratio of 16:9 on the Container.",
+    information: {},
+  },
+];
+
+export default Video;

package/controls/Borders/Border.js

@@ -0,0 +1,114 @@
+export const Border = [
+    {
+        title: "Style",
+        id: "borderStyle",
+        format: "border-{{value}}",
+        segmented: {
+            default: "none",
+            items: [
+                {
+                    icon: "square.slash",
+                    value: "none",
+                },
+                {
+                    icon: "square",
+                    value: "solid",
+                },
+                {
+                    icon: "square.dashed",
+                    value: "dashed",
+                },
+                {
+                    icon: "square.dotted",
+                    value: "dotted",
+                },
+            ],
+        },
+    },
+    {
+        visible: "borderStyle != 'none'",
+        title: "Color",
+        id: "borderColor",
+        format: "border-{{value}}",
+        themeColor: {
+            default: {
+                name: "surface",
+                brightness: 500,
+            },
+        },
+    },
+    {
+        visible: "borderStyle != 'none'",
+        title: "Opacity",
+        id: "borderColorOpacity",
+        format: "[{{value}}%]",
+        slider: {
+            default: 100,
+            use: "Slider",
+            units: "%",
+        },
+    },
+    {
+        visible: "borderStyle != 'none'",
+        title: "Width",
+        id: "borderWidth",
+        themeBorderWidth: {
+            default: {
+                base: {
+                    top: "2",
+                    right: "2",
+                    bottom: "2",
+                    left: "2",
+                    linkHorizontal: true,
+                    linkVertical: true,
+                },
+            },
+        },
+    },
+];
+
+export const BorderHover = [
+    {
+        visible: "borderStyle != 'none'",
+        title: "Color",
+        id: "borderColorHover",
+        format: "hover:border-{{value}}",
+        themeColor: {
+            base: {
+                name: "gray",
+                brightness: 500,
+            },
+        },
+    },
+    {
+        visible: "borderStyle != 'none'",
+        title: "Opacity",
+        id: "borderColorOpacityHover",
+        format: "[{{value}}%]",
+        slider: {
+            default: 100,
+            use: "Slider",
+            units: "%",
+        },
+    },
+    {
+        visible: "borderStyle != 'none'",
+        title: "Width",
+        id: "borderWidthHover",
+        format: "hover:{{value}}",
+        themeBorderWidth: {
+            default: {
+                base: {
+                    top: "2",
+                    right: "2",
+                    bottom: "2",
+                    left: "2",
+                    linkHorizontal: true,
+                    linkVertical: true,
+                },
+            },
+        },
+    },
+];
+
+export default Border;

package/controls/Borders/BorderColor.js

@@ -0,0 +1,25 @@
+const BorderColor = [
+  {
+    title: "Color",
+    id: "globalBordersColor",
+    format: "border-{{value}}",
+    themeColor: {
+      default: {
+        name: "surface",
+        brightness: 500,
+      },
+    },
+  },
+  {
+    title: "Opacity",
+    id: "globalBordersColorOpacity",
+    format: "[{{value}}%]",
+    slider: {
+      default: 100,
+      use: "Slider",
+      units: "%",
+    },
+  },
+];
+
+export default BorderColor;

package/controls/Borders/BorderRadius.js

@@ -0,0 +1,19 @@
+const BorderRadius = [
+  {
+    title: "Radius",
+    id: "globalBordersRadius",
+    format: "{{value}}",
+    themeBorderRadius: {
+      default: {
+        base: {
+          topLeft: "Default",
+          topRight: "Default",
+          bottomLeft: "Default",
+          bottomRight: "Default",
+        },
+      },
+    },
+  },
+];
+
+export default BorderRadius;

package/controls/Borders/BorderStyle.js

@@ -0,0 +1,26 @@
+const BorderStyle = [
+  {
+    title: "Style",
+    id: "globalBordersStyle",
+    format: "border-{{value}}",
+    segmented: {
+      default: "solid",
+      items: [
+        {
+          icon: "square",
+          value: "solid",
+        },
+        {
+          icon: "square.dashed",
+          value: "dashed",
+        },
+        {
+          icon: "square.dotted",
+          value: "dotted",
+        },
+      ],
+    },
+  },
+];
+
+export default BorderStyle;

package/controls/Borders/BorderWidth.js

@@ -0,0 +1,20 @@
+const BorderWidth = [
+  {
+    title: "Width",
+    id: "globalBordersWidth",
+    themeBorderWidth: {
+      default: {
+        base: {
+          top: "0",
+          right: "0",
+          bottom: "0",
+          left: "0",
+          linkHorizontal: true,
+          linkVertical: true,
+        },
+      },
+    },
+  },
+];
+
+export default BorderWidth;

package/controls/Borders/Borders.js

@@ -0,0 +1,69 @@
+export const Borders = [
+  {
+    globalControl: "ControlType",
+    id: "{{value}}Borders",
+  },
+  {
+    visible: "globalControlTypeBorders == 'hover'",
+    title: "State",
+    id: "globalBordersState",
+    responsive: false,
+    segmented: {
+      default: "start",
+      items: [
+        {
+          title: "Start",
+          value: "start",
+        },
+        {
+          title: "End",
+          value: "end",
+        },
+      ]
+    }
+  },
+  {
+    divider: {},
+    visible: "globalControlTypeBorders != 'none'",
+  },
+  {
+    visible: "globalControlTypeBorders == 'static' || (globalControlTypeBorders == 'hover' && globalBordersState == 'start')",
+    globalControl: "BorderStyle",
+  },
+  {
+    visible: "globalControlTypeBorders == 'static' || (globalControlTypeBorders == 'hover' && globalBordersState == 'start')",
+    globalControl: "BorderColor",
+  },
+  {
+    visible: "globalControlTypeBorders == 'static' || (globalControlTypeBorders == 'hover' && globalBordersState == 'start')",
+    globalControl: "BorderWidth",
+  },
+  {
+    visible: "globalControlTypeBorders == 'static' || (globalControlTypeBorders == 'hover' && globalBordersState == 'start')",
+    globalControl: "BorderRadius",
+  },
+  {
+    visible: "(globalControlTypeBorders == 'hover' && globalBordersState == 'end')",
+    globalControl: "BorderStyle",
+    id: "{{value}}End",
+  },
+  {
+    visible: "(globalControlTypeBorders == 'hover' && globalBordersState == 'end')",
+    globalControl: "BorderColor",
+    id: "{{value}}End",
+  },
+  {
+    visible: "(globalControlTypeBorders == 'hover' && globalBordersState == 'end')",
+    globalControl: "BorderWidth",
+    id: "{{value}}End",
+    format: "hover:{{value}}",
+  },
+  {
+    visible: "(globalControlTypeBorders == 'hover' && globalBordersState == 'end')",
+    globalControl: "BorderRadius",
+    format: "hover:{{value}}",
+    id: "{{value}}End",
+  },
+];
+
+export default Borders;

package/controls/Borders/BordersContainer.js

@@ -0,0 +1,90 @@
+export const BordersContainer = [
+  {
+    globalControl: "ControlType",
+    id: "{{value}}Borders",
+  },
+  {
+    visible: "globalControlTypeBorders == 'hover'",
+    title: "State",
+    id: "globalBordersState",
+    responsive: false,
+    segmented: {
+      default: "start",
+      items: [
+        {
+          title: "Start",
+          value: "start",
+        },
+        {
+          title: "End",
+          value: "end",
+        },
+      ]
+    }
+  },
+  {
+    divider: {},
+    visible: "globalControlTypeBorders != 'none'",
+  },
+  {
+    visible: "globalControlTypeBorders == 'static' || (globalControlTypeBorders == 'hover' && globalBordersState == 'start')",
+    globalControl: "BorderStyle",
+  },
+  {
+    visible: "globalControlTypeBorders == 'static' || (globalControlTypeBorders == 'hover' && globalBordersState == 'start')",
+    globalControl: "BorderColor",
+  },
+  {
+    visible: "globalControlTypeBorders == 'static' || (globalControlTypeBorders == 'hover' && globalBordersState == 'start')",
+    globalControl: "BorderWidth",
+  },
+  {
+    visible: "globalControlTypeBorders == 'static' || (globalControlTypeBorders == 'hover' && globalBordersState == 'start')",
+    title: "Radius",
+    id: "globalBordersRadius",
+    format: "{{value}}",
+    themeBorderRadius: {
+      default: {
+        base: {
+          topLeft: "none",
+          topRight: "none",
+          bottomLeft: "none",
+          bottomRight: "none",
+        },
+      },
+    },
+  },
+  {
+    visible: "(globalControlTypeBorders == 'hover' && globalBordersState == 'end')",
+    globalControl: "BorderStyle",
+    id: "{{value}}End",
+  },
+  {
+    visible: "(globalControlTypeBorders == 'hover' && globalBordersState == 'end')",
+    globalControl: "BorderColor",
+    id: "{{value}}End",
+  },
+  {
+    visible: "(globalControlTypeBorders == 'hover' && globalBordersState == 'end')",
+    globalControl: "BorderWidth",
+    id: "{{value}}End",
+  },
+  {
+    visible: "(globalControlTypeBorders == 'hover' && globalBordersState == 'end')",
+    title: "Radius",
+    id: "globalBordersRadiusEnd",
+    format: "peer-hover:{{value}} hover:{{value}}",
+    themeBorderRadius: {
+      default: {
+        base: {
+          topLeft: "none",
+          topRight: "none",
+          bottomLeft: "none",
+          bottomRight: "none",
+        },
+      },
+    },
+  },
+];
+
+export default BordersContainer;