rw-elements-tools 1.2.0

package/controls/Borders/BordersInput.js

@@ -0,0 +1,107 @@
+export const BordersInput = [
+  {
+    globalControl: "ControlType",
+    id: "{{value}}Borders",
+    segmented: {
+      default: "static",
+    }
+  },
+  {
+    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",
+    default: {
+      name: "surface",
+      brightness: 900,
+    }
+  },
+  {
+    visible: "globalControlTypeBorders == 'static' || (globalControlTypeBorders == 'hover' && globalBordersState == 'start')",
+    globalControl: "BorderWidth",
+    default: {
+      base: {
+        top: "Default",
+        right: "Default",
+        bottom: "Default",
+        left: "Default",
+      }
+    }
+  },
+  {
+    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",
+    format: "hover:{{value}}",
+  },
+  {
+    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')",
+    title: "Radius",
+    id: "globalBordersRadiusEnd",
+    format: "hover:{{value}}",
+    themeBorderRadius: {
+      default: {
+        base: {
+          topLeft: "none",
+          topRight: "none",
+          bottomLeft: "none",
+          bottomRight: "none",
+        },
+      },
+    },
+  },
+];
+
+export default BordersInput;

package/controls/Borders/Outline.js

@@ -0,0 +1,100 @@
+export const Outline = [
+  {
+    title: "Type",
+    id: "globalControlTypeOutline",
+    responsive: false,
+    segmented: {
+      default: "none",
+      items: [
+        {
+          title: "None",
+          value: "none",
+        },
+        {
+          title: "Static",
+          value: "static",
+        },
+        {
+          title: "Focus",
+          value: "focus",
+        },
+      ]
+    }
+  },
+  {
+    visible: "globalControlTypeOutline != 'none'",
+    globalControl: "OutlineStyle",
+  },
+  {
+    visible: "globalControlTypeOutline == 'focus'",
+    title: "State",
+    id: "globalOutlineState",
+    responsive: false,
+    segmented: {
+      default: "unfocused",
+      items: [
+        {
+          title: "Unfocused",
+          value: "unfocused",
+        },
+        {
+          title: "Focused",
+          value: "focused",
+        },
+      ]
+    }
+  },
+  {
+    divider: {},
+    visible: "globalControlTypeOutline != 'none'",
+  },
+  {
+    visible: "globalControlTypeOutline == 'static' || (globalControlTypeOutline == 'focus' && globalOutlineState == 'unfocused')",
+    globalControl: "OutlineColor",
+  },
+  {
+    visible: "globalControlTypeOutline == 'static' || (globalControlTypeOutline == 'focus' && globalOutlineState == 'unfocused')",
+    globalControl: "OutlineWidth",
+  },
+  {
+    visible: "globalControlTypeOutline == 'static' || (globalControlTypeOutline == 'focus' && globalOutlineState == 'unfocused')",
+    globalControl: "OutlineOffset",
+  },
+  {
+    visible: "(globalControlTypeOutline == 'focus' && globalOutlineState == 'focused')",
+    title: "Color",
+    id: "globalOutlineColorFocus",
+    format: "focus:outline-{{value}}",
+    themeColor: {
+      default: {
+        name: "surface",
+        brightness: 500,
+      },
+    },
+  },
+  {
+    visible: "(globalControlTypeOutline == 'focus' && globalOutlineState == 'focused')",
+    title: "Opacity",
+    id: "globalOutlineColorOpacityFocus",
+    format: "[{{value}}%]",
+    slider: {
+      default: 100,
+      use: "Slider",
+      units: "%",
+    },
+  },
+  {
+    visible: "(globalControlTypeOutline == 'focus' && globalOutlineState == 'focused')",
+    globalControl: "OutlineWidth",
+    id: "{{value}}Focus",
+    format: "focus:outline-[{{value}}px]",
+  },
+  {
+    visible: "(globalControlTypeOutline == 'focus' && globalOutlineState == 'focused')",
+    globalControl: "OutlineOffset",
+    format: "focus:outline-offset-[{{value}}px]",
+    id: "{{value}}Focus",
+  },
+];
+
+export default Outline;

package/controls/Borders/OutlineColor.js

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

package/controls/Borders/OutlineOffset.js

@@ -0,0 +1,13 @@
+const OutlineOffset = [
+  {
+    title: "Offset",
+    id: "globalOutlineOffset",
+    format: "outline-offset-[{{value}}px]",
+    number: {
+      default: 0,
+      subtitle: "in pixels",
+    },
+  },
+];
+
+export default OutlineOffset;

package/controls/Borders/OutlineStyle.js

@@ -0,0 +1,26 @@
+const OutlineStyle = [
+  {
+    title: "Style",
+    id: "globalOutlineStyle",
+
+    segmented: {
+      default: "outline",
+      items: [
+        {
+          icon: "square",
+          value: "outline",
+        },
+        {
+          icon: "square.dashed",
+          value: "outline-dashed",
+        },
+        {
+          icon: "square.dotted",
+          value: "outline-dotted",
+        },
+      ],
+    },
+  },
+];
+
+export default OutlineStyle;

package/controls/Borders/OutlineWidth.js

@@ -0,0 +1,13 @@
+const OutlineWidth = [
+  {
+    title: "Width",
+    id: "globalOutlineWidth",
+    format: "outline-[{{value}}px]",
+    number: {
+      default: 1,
+      subtitle: "in pixels",
+    },
+  },
+];
+
+export default OutlineWidth;

package/controls/Effects/BackdropBlur.js

@@ -0,0 +1,11 @@
+const BackdropBlur = {
+  title: "Blur",
+  id: "globalFiltersBackdropBlur",
+  format: "backdrop-blur-[{{value}}px]",
+  number: {
+    default: 0,
+    subtitle: "In pixels",
+  },
+};
+
+export default BackdropBlur;

package/controls/Effects/Blur.js

@@ -0,0 +1,11 @@
+const Blur = {
+  title: "Blur",
+  id: "globalFiltersBlur",
+  format: "blur-[{{value}}px]",
+  number: {
+    default: 0,
+    subtitle: "In pixels",
+  },
+};
+
+export default Blur;

package/controls/Effects/BoxShadow.js

@@ -0,0 +1,15 @@
+const BoxShadow = [
+  {
+    title: "Box Shadow",
+    id: "globalBoxShadow",
+    themeShadow: {
+      default: {
+        base: {
+          name: "Default",
+        },
+      },
+    },
+  },
+];
+
+export default BoxShadow;

package/controls/Effects/Brightness.js

@@ -0,0 +1,11 @@
+const Brightness = {
+  title: "Brightness",
+  id: "globalFiltersBrightness",
+  format: "brightness-[{{value}}%]",
+  number: {
+    default: 100,
+    subtitle: "In percent",
+  },
+};
+
+export default Brightness;

package/controls/Effects/DropShadow.js

@@ -0,0 +1,14 @@
+const DropShadow = {
+    title: "Drop Shadow",
+    id: "globalFiltersDropShadow",
+    themeShadow: {
+        mode: "drop",
+        default: {
+            base: {
+                name: "none",
+            },
+        },
+    },
+};
+
+export default DropShadow;

package/controls/Effects/Effects.js

@@ -0,0 +1,71 @@
+const Effects = [
+    {
+        globalControl: "ControlType",
+        id: "{{value}}Effects",
+    },
+    {
+        visible: "globalControlTypeEffects == 'hover'",
+        globalControl: "HoverGroup",
+        id: "{{value}}Effects",
+    },
+    {
+        visible:
+            "globalControlTypeEffects == 'hover' && globalHoverGroupEffects == 'custom'",
+        title: "ID",
+        id: "globalHoverGroupCustomIdEffects",
+        text: {},
+    },
+    {
+        visible: "globalHoverGroupEffects == 'custom'",
+        title: "The ID of the parent element to trigger the effects.",
+        information: {},
+    },
+    {
+        visible:
+            "globalControlTypeEffects != 'none' && globalControlTypeEffects != 'static'",
+        title: "State",
+        id: "globalEffectsState",
+        responsive: false,
+        segmented: {
+            default: "start",
+            items: [
+                {
+                    title: "Start",
+                    value: "start",
+                },
+                {
+                    title: "End",
+                    value: "end",
+                },
+            ],
+        },
+    },
+    {
+        visible: "globalControlTypeEffects != 'none'",
+        divider: {},
+    },
+    {
+        visible:
+            "globalControlTypeEffects == 'static' || (globalControlTypeEffects == 'hover' && globalEffectsState == 'start')",
+        globalControl: "BoxShadow",
+    },
+    {
+        visible:
+            "globalControlTypeEffects == 'static' || (globalControlTypeEffects == 'hover' && globalEffectsState == 'start')",
+        globalControl: "Opacity",
+    },
+    {
+        visible:
+            "(globalControlTypeEffects == 'hover' && globalEffectsState == 'end')",
+        globalControl: "BoxShadow",
+        id: "{{value}}End",
+    },
+    {
+        visible:
+            "(globalControlTypeEffects == 'hover' && globalEffectsState == 'end')",
+        globalControl: "Opacity",
+        id: "{{value}}End",
+    },
+];
+
+export default Effects;

package/controls/Effects/Filters.js

@@ -0,0 +1,114 @@
+const Filters = [
+    {
+        globalControl: "ControlType",
+        id: "{{value}}Filters",
+    },
+    {
+        visible: "globalControlTypeFilters == 'hover'",
+        globalControl: "HoverGroup",
+        id: "{{value}}Filters",
+    },
+    {
+        visible:
+            "globalControlTypeFilters == 'hover' && globalHoverGroupFilters == 'custom'",
+        title: "ID",
+        id: "globalHoverGroupCustomIdFilters",
+        text: {},
+    },
+    {
+        visible: "globalHoverGroupFilters == 'custom'",
+        title: "The ID of the parent element to trigger the filters.",
+        information: {},
+    },
+    {
+        visible:
+            "globalControlTypeFilters != 'none' && globalControlTypeFilters != 'static'",
+        title: "State",
+        id: "globalFiltersState",
+        responsive: false,
+        segmented: {
+            default: "start",
+            items: [
+                {
+                    title: "Start",
+                    value: "start",
+                },
+                {
+                    title: "End",
+                    value: "end",
+                },
+            ],
+        },
+    },
+    {
+        visible: "globalControlTypeFilters != 'none'",
+        divider: {},
+    },
+    {
+        visible: "globalControlTypeFilters != 'none'",
+        title: "Filters",
+        heading: {},
+    },
+    {
+        visible:
+            "globalControlTypeFilters == 'static' || (globalControlTypeFilters == 'hover' && globalFiltersState == 'start')",
+        globalControl: "Blur",
+    },
+    {
+        visible:
+            "globalControlTypeFilters == 'static' || (globalControlTypeFilters == 'hover' && globalFiltersState == 'start')",
+        globalControl: "Brightness",
+    },
+    {
+        visible:
+            "globalControlTypeFilters == 'static' || (globalControlTypeFilters == 'hover' && globalFiltersState == 'start')",
+        globalControl: "Saturate",
+    },
+    {
+        visible:
+            "globalControlTypeFilters == 'static' || (globalControlTypeFilters == 'hover' && globalFiltersState == 'start')",
+        globalControl: "DropShadow",
+    },
+    {
+        visible:
+            "(globalControlTypeFilters == 'hover' && globalFiltersState == 'end')",
+        globalControl: "Blur",
+        id: "{{value}}End",
+    },
+    {
+        visible:
+            "(globalControlTypeFilters == 'hover' && globalFiltersState == 'end')",
+        globalControl: "Brightness",
+        id: "{{value}}End",
+    },
+    {
+        visible:
+            "(globalControlTypeFilters == 'hover' && globalFiltersState == 'end')",
+        globalControl: "Saturate",
+        id: "{{value}}End",
+    },
+    {
+        visible:
+            "(globalControlTypeFilters == 'hover' && globalFiltersState == 'end')",
+        globalControl: "DropShadow",
+        id: "{{value}}End",
+    },
+    {
+        visible: "globalControlTypeFilters != 'none'",
+        title: "Backdrop Filters",
+        heading: {},
+    },
+    {
+        visible:
+            "globalControlTypeFilters == 'static' || (globalControlTypeFilters == 'hover' && globalFiltersState == 'start')",
+        globalControl: "BackdropBlur",
+    },
+    {
+        visible:
+            "(globalControlTypeFilters == 'hover' && globalFiltersState == 'end')",
+        globalControl: "BackdropBlur",
+        id: "{{value}}End",
+    },
+];
+
+export default Filters;

package/controls/Effects/Opacity.js

@@ -0,0 +1,14 @@
+const Opacity = [
+  {
+    title: "Opacity",
+    id: "globalOpacity",
+    format: "opacity-[{{value}}%]",
+    slider: {
+      use: "Slider",
+      default: 100,
+      units: "%",
+    },
+  },
+];
+
+export default Opacity;

package/controls/Effects/Saturate.js

@@ -0,0 +1,11 @@
+const Saturate = {
+  title: "Saturate",
+  id: "globalFiltersSaturate",
+  format: "saturate-[{{value}}%]",
+  number: {
+    default: 100,
+    subtitle: "In percent",
+  },
+};
+
+export default Saturate;

package/controls/Layout/AspectRatio.js

@@ -0,0 +1,53 @@
+export const AspectRatio = [
+    {
+        title: "Aspect Ratio",
+        id: "aspectRatio",
+        format: "aspect-[{{value}}]",
+        segmented: {
+            default: "auto",
+            items: [
+                {
+                    title: "Auto",
+                    value: "auto",
+                    default: true,
+                },
+                {
+                    title: "Wide",
+                    value: "16/9",
+                },
+                {
+                    title: "Tall",
+                    value: "4/5",
+                },
+                {
+                    icon: "slider.horizontal.3",
+                    value: "custom",
+                },
+            ],
+        },
+    },
+    {
+        visible: "aspectRatio == 'custom'",
+        title: "Custom Ratio",
+        id: "aspectRatioCustom",
+        format: "aspect-[{{value}}]",
+        text: {
+            default: "7/5",
+        },
+    },
+    {
+        visible: "aspectRatio == 'custom'",
+        title: "An 'x/y' value such as 1/1 or 5/7.",
+        information: {},
+    },
+    {
+        visible: "aspectRatio != 'auto'",
+        globalControl: "ObjectFit",
+    },
+    {
+        visible: "aspectRatio != 'auto'",
+        globalControl: "ObjectPosition",
+    },
+];
+
+export default AspectRatio;

package/controls/Layout/Container.js

@@ -0,0 +1,24 @@
+const LayoutContainer = [
+  {
+    title: "Container (Breakpoint widths)",
+    heading: {}
+  },
+  {
+    title: "Sets the max-width of an element to match the min-width of the current breakpoint.",
+    information: {}
+  },
+  {
+    title: "Enable",
+    id: "globalLayoutContainerEnabled",
+    switch: {
+      default: false,
+      trueValue: "container",
+      falseValue: "",
+    }
+  },
+  {
+    divider: {}
+  }
+]
+
+export default LayoutContainer;

package/controls/Layout/Hidden.js

@@ -0,0 +1,9 @@
+const Hidden = {
+    title: "Hidden",
+    id: "globalLayoutHidden",
+    switch: {
+        default: false,
+    },
+};
+
+export default Hidden;

package/controls/Layout/Inset.js

@@ -0,0 +1,15 @@
+const LayoutInset = [
+  {
+    title: "Inset",
+    id: "globalLayoutInset",
+    format: "inset-{{value}}",
+    themeSpacing: {
+      mode: "single",
+      default: {
+        base: "0"
+      },
+    }
+  },
+];
+
+export default LayoutInset;