rw-elements-tools 1.2.0

package/controls/grid-flex/RowStart.js

@@ -0,0 +1,27 @@
+const RowStart = {
+  id: "globalGridItemRowStart",
+  format: "row-start-{{value}}",
+  title: "Start",
+  slider: {
+    default: {
+      base: "auto",
+    },
+    items: [
+      { value: "auto", title: "Auto" },
+      { value: "1", title: "1" },
+      { value: "2", title: "2" },
+      { value: "3", title: "3" },
+      { value: "4", title: "4" },
+      { value: "5", title: "5" },
+      { value: "6", title: "6" },
+      { value: "7", title: "7" },
+      { value: "8", title: "8" },
+      { value: "9", title: "9" },
+      { value: "10", title: "10" },
+      { value: "11", title: "11" },
+      { value: "12", title: "12" },
+    ],
+  },
+};
+
+export default RowStart;

package/controls/grid-flex/Rows.js

@@ -0,0 +1,38 @@
+const Rows = [
+  {
+    visible: "globalGridOrFlexDisplayAs == 'grid'",
+    id: "globalGridItemRowSpan",
+    title: "Rows",
+    format: "row-span-{{value}}",
+    slider: {
+      default: {
+        base: "auto",
+      },
+      items: [
+        { value: "auto", title: "Auto" },
+        { value: "1", title: "1" },
+        { value: "2", title: "2" },
+        { value: "3", title: "3" },
+        { value: "4", title: "4" },
+        { value: "5", title: "5" },
+        { value: "6", title: "6" },
+        { value: "7", title: "7" },
+        { value: "8", title: "8" },
+        { value: "9", title: "9" },
+        { value: "10", title: "10" },
+        { value: "11", title: "11" },
+        { value: "12", title: "12" },
+      ],
+    },
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs == 'grid' && globalGridOrFlexItemSettings == 'advanced'",
+    globalControl: "RowStart"
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs == 'grid' && globalGridOrFlexItemSettings == 'advanced'",
+    globalControl: "RowEnd"
+  }
+];
+
+export default Rows;

package/controls/index.js

@@ -0,0 +1,187 @@
+// =============================================================================
+// ALIGNMENT
+// =============================================================================
+export { default as AlignContent } from "./alignment/AlignContent.js";
+export { AlignItemsBasic } from "./alignment/AlignItems.js";
+export { default as AlignItems } from "./alignment/AlignItems.js";
+export { default as AlignSelf } from "./alignment/AlignSelf.js";
+export { default as JustifyContent } from "./alignment/JustifyContent.js";
+export { default as JustifyItems } from "./alignment/JustifyItems.js";
+export { default as JustifySelf } from "./alignment/JustifySelf.js";
+
+// =============================================================================
+// ANIMATIONS
+// =============================================================================
+export { default as Reveals } from "./Animations/Reveals.js";
+export { default as AnimationSettings } from "./Animations/AnimationSettings.js";
+export { default as AnimationEffects } from "./Animations/AnimationEffects.js";
+export { default as ScrollAnimation_Opacity } from "./Animations/ScrollAnimation_Opacity.js";
+export { default as ScrollAnimation_Rotate } from "./Animations/ScrollAnimation_Rotate.js";
+export { default as ScrollAnimation_Scale } from "./Animations/ScrollAnimation_Scale.js";
+export { default as ScrollAnimation_Translate } from "./Animations/ScrollAnimation_Translate.js";
+
+// =============================================================================
+// BACKGROUND
+// =============================================================================
+export { default as Background } from "./Background/Background.js";
+export { default as BackgroundButton } from "./Background/BackgroundButton.js";
+export { default as BackgroundColor } from "./Background/BackgroundColor.js";
+export { default as BackgroundContainer } from "./Background/BackgroundContainer.js";
+export { default as BackgroundGradient } from "./Background/BackgroundGradient.js";
+export { default as BackgroundImage } from "./Background/BackgroundImage.js";
+export { default as BackgroundOnlyColor } from "./Background/BackgroundOnlyColor.js";
+export { default as BackgroundTransparent } from "./Background/BackgroundTransparent.js";
+export { default as BackgroundVideo } from "./Background/BackgroundVideo.js";
+export { default as Background_Color } from "./Background/Color.js";
+export { default as Background_Gradient } from "./Background/Gradient.js";
+export { default as Background_Gradient_Container } from "./Background/GradientContainer.js";
+export { default as Background_Image } from "./Background/Image.js";
+export { default as Background_Image_CMS } from "./Background/Image_CMS.js";
+export { default as Background_SVG } from "./Background/SVG.js";
+export { default as Background_Video } from "./Background/Video.js";
+
+// =============================================================================
+// BORDERS (includes Outline)
+// =============================================================================
+export { default as Border } from "./Borders/Border.js";
+export { BorderHover } from "./Borders/Border.js";
+export { default as Borders } from "./Borders/Borders.js";
+export { default as BordersContainer } from "./Borders/BordersContainer.js";
+export { default as BordersInput } from "./Borders/BordersInput.js";
+export { default as BorderColor } from "./Borders/BorderColor.js";
+export { default as BorderRadius } from "./Borders/BorderRadius.js";
+export { default as BorderStyle } from "./Borders/BorderStyle.js";
+export { default as BorderWidth } from "./Borders/BorderWidth.js";
+export { default as Outline } from "./Borders/Outline.js";
+export { default as OutlineColor } from "./Borders/OutlineColor.js";
+export { default as OutlineOffset } from "./Borders/OutlineOffset.js";
+export { default as OutlineStyle } from "./Borders/OutlineStyle.js";
+export { default as OutlineWidth } from "./Borders/OutlineWidth.js";
+
+// =============================================================================
+// CORE
+// =============================================================================
+export { default as ControlType } from "./core/ControlType.js";
+export { default as CSSClasses } from "./core/CSSClasses.js";
+export { default as HTMLTag } from "./core/HTMLTag.js";
+export { default as HoverGroup } from "./core/HoverGroup.js";
+export { default as ID } from "./core/ID.js";
+export { default as Image } from "./core/Image.js";
+export { default as MenuItem } from "./core/MenuItem.js";
+export { default as ObjectFit } from "./core/ObjectFit.js";
+export { default as ObjectPosition } from "./core/ObjectPosition.js";
+
+// =============================================================================
+// EFFECTS (includes Filters)
+// =============================================================================
+export { default as Effects } from "./Effects/Effects.js";
+export { default as BoxShadow } from "./Effects/BoxShadow.js";
+export { default as Opacity } from "./Effects/Opacity.js";
+export { default as Filters } from "./Effects/Filters.js";
+export { default as Blur } from "./Effects/Blur.js";
+export { default as Brightness } from "./Effects/Brightness.js";
+export { default as Saturate } from "./Effects/Saturate.js";
+export { default as DropShadow } from "./Effects/DropShadow.js";
+export { default as BackdropBlur } from "./Effects/BackdropBlur.js";
+
+// =============================================================================
+// GRID & FLEX
+// =============================================================================
+export { default as ActAsGridOrFlexItem } from "./grid-flex/ActAsGridOrFlexItem.js";
+export { default as FlexDirection } from "./grid-flex/FlexDirection.js";
+export { default as FlexItem } from "./grid-flex/FlexItem.js";
+export { default as GridItem } from "./grid-flex/GridItem.js";
+export { default as Columns } from "./grid-flex/Columns.js";
+export { default as Rows } from "./grid-flex/Rows.js";
+export { default as RowStart } from "./grid-flex/RowStart.js";
+export { default as RowEnd } from "./grid-flex/RowEnd.js";
+export { default as ColStart } from "./grid-flex/ColStart.js";
+export { default as ColEnd } from "./grid-flex/ColEnd.js";
+export { default as Order } from "./grid-flex/Order.js";
+
+// =============================================================================
+// INTERACTIVE
+// =============================================================================
+export { default as ButtonFontAndTextStyles } from "./interactive/ButtonFontAndTextStyles.js";
+export { default as Filter } from "./interactive/Filter.js";
+export { default as InputFontAndTextStyles } from "./interactive/InputFontAndTextStyles.js";
+export { default as Link } from "./interactive/Link.js";
+
+// =============================================================================
+// LAYOUT
+// =============================================================================
+export { default as AspectRatio } from "./Layout/AspectRatio.js";
+export { default as Container } from "./Layout/Container.js";
+export { default as Hidden } from "./Layout/Hidden.js";
+export { default as Inset } from "./Layout/Inset.js";
+export { default as Isolation } from "./Layout/Isolation.js";
+export { default as Layout } from "./Layout/Layout.js";
+export { default as Overflow } from "./Layout/Overflow.js";
+export { default as Position } from "./Layout/Position.js";
+export { default as TopRightBottomLeft } from "./Layout/TopRightBottomLeft.js";
+export { default as Visibility } from "./Layout/Visibility.js";
+export { default as ZIndex } from "./Layout/ZIndex.js";
+
+// =============================================================================
+// OVERLAY
+// =============================================================================
+export { default as Overlay } from "./Overlay/Overlay.js";
+export { default as Overlay_Color } from "./Overlay/Color.js";
+export { default as Overlay_Gradient } from "./Overlay/Gradient.js";
+export { default as Overlay_Image } from "./Overlay/Image.js";
+
+// =============================================================================
+// SIZING
+// =============================================================================
+export { default as Sizing } from "./Sizing/Sizing.js";
+export { default as SizingContainer } from "./Sizing/SizingContainer.js";
+export { default as SizingImage } from "./Sizing/SizingImage.js";
+export { default as SizingInput } from "./Sizing/SizingInput.js";
+export { default as SizingSVG } from "./Sizing/SizingSVG.js";
+export { default as Height } from "./Sizing/Height.js";
+export { default as Width } from "./Sizing/Width.js";
+export { default as MinWidth } from "./Sizing/MinWidth.js";
+export { default as MaxWidth } from "./Sizing/MaxWidth.js";
+export { default as MinHeight } from "./Sizing/MinHeight.js";
+export { default as MaxHeight } from "./Sizing/MaxHeight.js";
+
+// =============================================================================
+// SPACING
+// =============================================================================
+export { default as Margin } from "./Spacing/Margin.js";
+export { default as Padding } from "./Spacing/Padding.js";
+export { default as Spacing } from "./Spacing/Spacing.js";
+export { default as SpacingButton } from "./Spacing/SpacingButton.js";
+export { default as SpacingContainer } from "./Spacing/SpacingContainer.js";
+export { default as SpacingInput } from "./Spacing/SpacingInput.js";
+
+// =============================================================================
+// TRANSFORMS
+// =============================================================================
+export { default as Transforms } from "./Transforms/Transforms.js";
+export { default as TransformOrigin } from "./Transforms/TransformOrigin.js";
+export { default as Rotate } from "./Transforms/Rotate.js";
+export { default as Scale } from "./Transforms/Scale.js";
+export { default as Skew } from "./Transforms/Skew.js";
+export { default as Translate } from "./Transforms/Translate.js";
+
+// =============================================================================
+// TRANSITIONS
+// =============================================================================
+export { default as Transitions } from "./Transitions/Transitions.js";
+export { default as Property } from "./Transitions/Property.js";
+export { default as Duration } from "./Transitions/Duration.js";
+export { default as Delay } from "./Transitions/Delay.js";
+export { default as TimingFunction } from "./Transitions/TimingFunction.js";
+
+// =============================================================================
+// TYPOGRAPHY
+// =============================================================================
+export { default as HeadingColor } from "./typography/HeadingColor.js";
+export { default as TextColor } from "./typography/TextColor.js";
+export { TextColorHover } from "./typography/TextColor.js";
+export { default as TextDecoration } from "./typography/TextDecoration.js";
+export { default as TextFontsAndTextStyles } from "./typography/TextFontsAndTextStyles.js";
+export { default as TextSimple } from "./typography/TextSimple.js";
+export { default as TextStyles } from "./typography/TextStyles.js";
+export { default as Typography } from "./typography/Typography.js";

package/controls/interactive/ButtonFontAndTextStyles.js

@@ -0,0 +1,208 @@
+const ButtonFontAndTextStyles = [
+  {
+    title: "State",
+    id: "globalButtonFontAndTextStylesState",
+    segmented: {
+      default: "normal",
+      items: [
+        {
+          title: "Normal",
+          value: "normal",
+        },
+        {
+          title: "Hover",
+          value: "hover",
+        },
+      ],
+    }
+  },
+  {
+    visible: "globalButtonFontAndTextStylesState == 'normal'",
+    title: "Color",
+    id: "globalButtonFontAndTextStylesColor",
+    format: "text-{{value}}",
+    themeColor: {
+      default: {
+        name: "surface",
+        brightness: 50
+      }
+    }
+  },
+  {
+    visible: "globalButtonFontAndTextStylesState == 'normal'",
+    title: "Opacity",
+    id: "globalButtonFontAndTextStylesColorOpacity",
+    format: "text-opacity-[{{value}}%] dark:text-opacity-[{{value}}%]",
+    slider: {
+      use: "Slider",
+      default: 100,
+      units: "%",
+    }
+  },
+  {
+    visible: "globalButtonFontAndTextStylesState == 'hover'",
+    title: "Color",
+    id: "globalButtonFontAndTextStylesColorHover",
+    format: "hover:text-{{value}}",
+    themeColor: {
+      default: {
+        name: "surface",
+        brightness: 50
+      }
+    }
+  },
+  {
+    visible: "globalButtonFontAndTextStylesState == 'hover'",
+    title: "Opacity",
+    id: "globalButtonFontAndTextStylesColorOpacityHover",
+    format: "hover:text-opacity-[{{value}}%] dark:hover:text-opacity-[{{value}}%]",
+    slider: {
+      use: "Slider",
+      default: 100,
+      units: "%",
+    }
+  },
+  {
+    visible: "globalButtonFontAndTextStylesState == 'normal'",
+    title: "Text Shadow",
+    id: "globalButtonFontAndTextStylesTextShadow",
+    themeShadow: {
+      mode: "text",
+      default: {
+        name: "none",
+      }
+    }
+  },
+  {
+    visible: "globalButtonFontAndTextStylesState == 'hover'",
+    title: "Text Shadow",
+    id: "globalButtonFontAndTextStylesTextShadowHover",
+    format: "hover:{{value}}",
+    themeShadow: {
+      mode: "text",
+      default: {
+        name: "none",
+      }
+    }
+  },
+  {
+    divider: {},
+  },
+  {
+    title: "General",
+    heading: {}
+  },
+  {
+    title: "Align",
+    id: "globalButtonFontAndTextStylesTextAlign",
+    format: "justify-{{value}}",
+    segmented: {
+      default: "center",
+      items: [
+        {
+          value: "start",
+          icon: "text.alignleft",
+        },
+        {
+          value: "center",
+          icon: "text.aligncenter"
+        },
+        {
+          value: "end",
+          icon: "text.alignright"
+        },
+      ]
+    },
+  },
+  {
+    title: "Family",
+    id: "globalButtonFontAndTextStylesFont",
+    themeFont: {
+      default: {
+        base: "body"
+      }
+    }
+  },
+  {
+    title: "Size",
+    id: "globalButtonFontAndTextStylesFontSize",
+    themeTextStyle: {
+      default: {
+        base: { name: "base" }
+      }
+    }
+  },
+  {
+    title: "Font Settings",
+    heading: {}
+  },
+  {
+    title: "Weight",
+    id: "globalButtonFontAndTextStylesFontWeight",
+    format: "font-[{{value}}]",
+    slider: {
+      use: "FontWeight",
+    }
+  },
+  {
+    title: "Line Height",
+    id: "globalButtonFontAndTextStylesLineHeight",
+    format: "leading-{{value}}",
+    slider: {
+      use: "LineHeight",
+    }
+  },
+  {
+    title: "Letter Spacing",
+    id: "globalButtonFontAndTextStylesLetterSpacing",
+    format: "tracking-{{value}}",
+    slider: {
+      use: "LetterSpacing",
+    }
+  },
+  {
+    title: "Case",
+    id: "globalButtonFontAndTextStylesTextTransform",
+    select: {
+      default: "normal-case",
+      items: [
+        {
+          value: "normal-case",
+          title: "None",
+        },
+        {
+          value: "uppercase",
+          title: "Uppercase",
+        },
+        {
+          value: "lowercase",
+          title: "Lowercase",
+        },
+        {
+          value: "capitalize",
+          title: "Capitalize",
+        },
+      ],
+    },
+  },
+  {
+    title: "Italic",
+    id: "globalButtonFontAndTextStylesItalic",
+    switch: {
+      default: false,
+      trueValue: "italic",
+      falseValue: "",
+    }
+  },
+  {
+    title: "Underline",
+    id: "globalButtonFontAndTextStylesUnderline",
+    switch: {
+      default: false,
+      trueValue: "underline",
+      falseValue: "",
+    }
+  },
+];
+
+export default ButtonFontAndTextStyles;

package/controls/interactive/Filter.js

@@ -0,0 +1,54 @@
+const Filter = [
+    {
+      title: "Filtering",
+      heading: {}
+    },
+    {
+        title: "Enable",
+        id: "globalFilterEnable",
+        responsive: false,
+        switch: {
+            default: false,
+        }
+    },
+    {
+        visible: "globalFilterEnable == true",
+        title: "Group",
+        id: "globalFilterGroup",
+        responsive: false,
+        segmented: {
+            default: "parent",
+            items: [
+                {
+                    title: "Parent",
+                    value: "parent"
+                },
+                {
+                    title: "Custom",
+                    value: "custom"
+                }
+            ]
+        }
+    },
+    {
+        visible: "globalFilterEnable == true && globalFilterGroup == 'custom'",
+        title: "Group ID",
+        id: "globalFilterCustomGroupId",
+        responsive: false,
+        text: {
+            default: "unique-group-id"
+        }
+    },
+    {
+        visible: "globalFilterEnable == true",
+        title: "Transition",
+        id: "globalFilterTransition",
+        responsive: false,
+        select: {
+            use: "TransitionNames"
+        }
+    }
+  ];
+  
+  export default Filter;
+  

package/controls/interactive/InputFontAndTextStyles.js

@@ -0,0 +1,156 @@
+const InputFontAndTextStyles = [
+    {
+      title: "Color",
+      id: "globalInputFontAndTextStylesColor",
+      format: "text-{{value}}",
+      themeColor: {
+        default: {
+          name: "text",
+          brightness: 50
+        }
+      }
+    },
+    {
+      title: "Opacity",
+      id: "globalInputFontAndTextStylesColorOpacity",
+      format: "text-opacity-[{{value}}%] dark:text-opacity-[{{value}}%]",
+      slider: {
+        use: "Slider",
+        default: 100,
+        units: "%",
+      }
+    },
+    {
+      title: "Text Shadow",
+      id: "globalInputFontAndTextStylesTextShadow",
+      themeShadow: {
+        mode: "text",
+        default: {
+            base: {
+                name: "none"
+            }
+        }
+      }
+    },
+    {
+      divider: {},
+    },
+    {
+      title: "General",
+      heading: {}
+    },
+    {
+      title: "Align",
+      id: "globalInputFontAndTextStylesTextAlign",
+      format: "text-{{value}}",
+      segmented: {
+        default: "start",
+        items: [
+          {
+            value: "start",
+            icon: "text.alignleft",
+          },
+          {
+            value: "center",
+            icon: "text.aligncenter"
+          },
+          {
+            value: "end",
+            icon: "text.alignright"
+          },
+        ]
+      },
+    },
+    {
+      title: "Family",
+      id: "globalInputFontAndTextStylesFont",
+      themeFont: {
+        default: {
+          base: "body"
+        }
+      }
+    },
+    {
+      title: "Size",
+      id: "globalInputFontAndTextStylesFontSize",
+      themeTextStyle: {
+        default: {
+          base: { name: "base" }
+        }
+      }
+    },
+    {
+      title: "Font Settings",
+      heading: {}
+    },
+    {
+      title: "Weight",
+      id: "globalInputFontAndTextStylesFontWeight",
+      format: "font-[{{value}}]",
+      slider: {
+        use: "FontWeight",
+      }
+    },
+    {
+      title: "Line Height",
+      id: "globalInputFontAndTextStylesLineHeight",
+      format: "leading-{{value}}",
+      slider: {
+        use: "LineHeight",
+      }
+    },
+    {
+      title: "Letter Spacing",
+      id: "globalInputFontAndTextStylesLetterSpacing",
+      format: "tracking-{{value}}",
+      slider: {
+        use: "LetterSpacing",
+      }
+    },
+    {
+      title: "Case",
+      id: "globalInputFontAndTextStylesTextTransform",
+      select: {
+        default: "normal-case",
+        items: [
+          {
+            value: "normal-case",
+            title: "None",
+          },
+          {
+            value: "uppercase",
+            title: "Uppercase",
+          },
+          {
+            value: "lowercase",
+            title: "Lowercase",
+          },
+          {
+            value: "capitalize",
+            title: "Capitalize",
+          },
+        ],
+      },
+    },
+    {
+      title: "Italic",
+      id: "globalInputFontAndTextStylesItalic",
+      switch: {
+        default: false,
+        trueValue: "italic",
+        falseValue: "",
+      }
+    },
+    {
+      title: "Underline",
+      id: "globalInputFontAndTextStylesUnderline",
+      switch: {
+        default: false,
+        trueValue: "underline",
+        falseValue: "",
+      }
+    },
+  ];
+  
+  export default InputFontAndTextStyles;
+  

package/controls/interactive/Link.js

@@ -0,0 +1,13 @@
+const Link = [
+  {
+    title: "Link",
+    heading: {}
+  },
+  {
+    title: "To",
+    id: "globalLink",
+    link: {}
+  }
+];
+
+export default Link;