rw-elements-tools 1.2.0

package/controls/alignment/AlignContent.js

@@ -0,0 +1,48 @@
+const AlignContent = {
+    title: "Content",
+    format: "content-{{value}}",
+    id: "alignContent",
+    select: {
+        default: "normal",
+        items: [
+            {
+                value: "normal",
+                title: "Normal",
+            },
+            {
+                value: "start",
+                title: "Start",
+            },
+            {
+                value: "end",
+                title: "End",
+            },
+            {
+                value: "center",
+                title: "Center",
+            },
+            {
+                value: "between",
+                title: "Between",
+            },
+            {
+                value: "around",
+                title: "Around",
+            },
+            {
+                value: "evenly",
+                title: "Evenly",
+            },
+            {
+                value: "stretch",
+                title: "Stretch",
+            },
+            {
+                value: "baseline",
+                title: "Baseline",
+            },
+        ],
+    },
+};
+
+export default AlignContent;

package/controls/alignment/AlignItems.js

@@ -0,0 +1,64 @@
+const AlignItems = {
+    id: "alignItems",
+    format: "items-{{value}}",
+    title: "Items",
+    select: {
+        default: "[normal]",
+        items: [
+            {
+                value: "[normal]",
+                title: "Normal",
+            },
+            {
+                value: "start",
+                title: "Start",
+            },
+            {
+                value: "end",
+                title: "End",
+            },
+            {
+                value: "center",
+                title: "Center",
+            },
+            {
+                value: "baseline",
+                title: "Baseline",
+            },
+            {
+                value: "stretch",
+                title: "Stretch",
+            },
+        ],
+    },
+};
+
+const AlignItemsBasic = {
+    title: "Align",
+    id: "alignItems",
+    format: "items-{{value}}",
+    segmented: {
+        default: "stretch",
+        items: [
+            {
+                value: "stretch",
+                icon: "rectangle.inset.filled",
+            },
+            {
+                value: "start",
+                icon: "arrow.left.to.line.compact",
+            },
+            {
+                value: "center",
+                icon: "arrow.right.and.line.vertical.and.arrow.left",
+            },
+            {
+                value: "end",
+                icon: "arrow.right.to.line.compact",
+            },
+        ],
+    },
+};
+
+export { AlignItemsBasic };
+export default AlignItems;

package/controls/alignment/AlignSelf.js

@@ -0,0 +1,34 @@
+const AlignSelf = [
+  {
+    title: "Align",
+    id: "globalGridOrFlexItemAlignSelf",
+    format: "self-{{value}}",
+    select: {
+      "default": "auto",
+      "items": [
+        {
+          value: "auto",
+          title: "Auto"
+        },
+        {
+          value: "start",
+          title: "Start"
+        },
+        {
+          value: "end",
+          title: "End"
+        },
+        {
+          value: "center",
+          title: "Center"
+        },
+        {
+          value: "stretch",
+          title: "Stretch"
+        },
+      ]
+    }
+  }
+];
+
+export default AlignSelf;

package/controls/alignment/JustifyContent.js

@@ -0,0 +1,44 @@
+const JustifyContent = {
+    title: "Content",
+    format: "justify-{{value}}",
+    id: "justifyContent",
+    select: {
+        default: "normal",
+        items: [
+            {
+                value: "normal",
+                title: "Normal",
+            },
+            {
+                value: "start",
+                title: "Start",
+            },
+            {
+                value: "end",
+                title: "End",
+            },
+            {
+                value: "center",
+                title: "Center",
+            },
+            {
+                value: "between",
+                title: "Between",
+            },
+            {
+                value: "around",
+                title: "Around",
+            },
+            {
+                value: "evenly",
+                title: "Evenly",
+            },
+            {
+                value: "stretch",
+                title: "Stretch",
+            },
+        ],
+    },
+};
+
+export default JustifyContent;

package/controls/alignment/JustifyItems.js

@@ -0,0 +1,32 @@
+const JustifyItems = {
+    title: "Items",
+    format: "justify-items-{{value}}",
+    id: "justifyItems",
+    select: {
+        default: "normal",
+        items: [
+            {
+                value: "[normal]",
+                title: "Normal",
+            },
+            {
+                value: "start",
+                title: "Start",
+            },
+            {
+                value: "end",
+                title: "End",
+            },
+            {
+                value: "center",
+                title: "Center",
+            },
+            {
+                value: "stretch",
+                title: "Stretch",
+            },
+        ],
+    },
+};
+
+export default JustifyItems;

package/controls/alignment/JustifySelf.js

@@ -0,0 +1,34 @@
+const JustifySelf = [
+  {
+    title: "Justify Self",
+    id: "globalGridOrFlexItemJustifySelf",
+    format: "justify-self-{{value}}",
+    select: {
+      default: "auto",
+      items: [
+        {
+          value: "auto",
+          title: "Auto"
+        },
+        {
+          value: "start",
+          title: "Start"
+        },
+        {
+          value: "end",
+          title: "End"
+        },
+        {
+          value: "center",
+          title: "Center"
+        },
+        {
+          value: "stretch",
+          title: "Stretch"
+        },
+      ]
+    }
+  }
+];
+
+export default JustifySelf;

package/controls/core/CSSClasses.js

@@ -0,0 +1,11 @@
+export const CSSClasses = [
+  {
+    title: "CSS Classes",
+    id: "cssClasses",
+    textArea: {
+      default: "",
+    },
+  },
+];
+
+export default CSSClasses;

package/controls/core/ControlType.js

@@ -0,0 +1,25 @@
+const ControlType =
+{
+  title: "Type",
+  id: "globalControlType",
+  responsive: false,
+  segmented: {
+    default: "none",
+    items: [
+      {
+        title: "None",
+        value: "none",
+      },
+      {
+        title: "Static",
+        value: "static",
+      },
+      {
+        title: "Hover",
+        value: "hover",
+      },
+    ]
+  }
+}
+
+export default ControlType;

package/controls/core/HTMLTag.js

@@ -0,0 +1,80 @@
+const HTMLTag = [
+  {
+    heading: {},
+    title: "HTML Tag",
+  },
+  {
+    information: {},
+    title: "Select the HTML tag that will be used to render this component.",
+  },
+  {
+    title: "Tag",
+    id: "globalHTMLTag",
+    responsive: false,
+    default: "default",
+    select: {
+      items: [
+        {
+          value: "default",
+          title: "Default (set by the component)",
+        },
+        {
+          value: "div",
+          title: "Div",
+        },
+        {
+          value: "span",
+          title: "Span",
+        },
+        {
+          value: "section",
+          title: "Section",
+        },
+        {
+          value: "article",
+          title: "Article",
+        },
+        {
+          value: "aside",
+          title: "Aside",
+        },
+        {
+          value: "header",
+          title: "Header",
+        },
+        {
+          value: "footer",
+          title: "Footer",
+        },
+        {
+          value: "nav",
+          title: "Nav",
+        },
+        {
+          value: "main",
+          title: "Main",
+        },
+        {
+          value: "custom",
+          title: "Custom",
+        },
+      ],
+    },
+  },
+  {
+    visible: "globalHTMLTag == 'custom'",
+    title: "",
+    id: "globalHTMLTagCustom",
+    responsive: false,
+    text: {
+      default: "div",
+    },
+  },
+  {
+    visible: "globalHTMLTag == 'custom'",
+    information: {},
+    title: 'Enter the custom tag name without the enclosing brackets. E.g. "div".',
+  },
+];
+
+export default HTMLTag;

package/controls/core/HoverGroup.js

@@ -0,0 +1,38 @@
+const HoverGroup = [
+    {
+        title: "Over",
+        id: "globalHoverGroup",
+        responsive: false,
+        select: {
+            default: "self",
+            items: [
+                {
+                    title: "Self",
+                    value: "self",
+                },
+                {
+                    title: "Parent",
+                    value: "parent",
+                },
+                {
+                    title: "Container",
+                    value: "container",
+                },
+                {
+                    title: "Grid",
+                    value: "grid",
+                },
+                {
+                    title: "Flex",
+                    value: "flex",
+                },
+                {
+                    title: "Custom ID",
+                    value: "custom",
+                },
+            ],
+        },
+    },
+];
+
+export default HoverGroup;

package/controls/core/ID.js

@@ -0,0 +1,12 @@
+const ID = [
+    {
+        title: "ID",
+        id: "globalID",
+        responsive: false,
+        text: {
+          default: "",
+        },
+    },
+];
+
+export default ID;

package/controls/core/Image.js

@@ -0,0 +1,95 @@
+export const Image = [
+    {
+        title: "Type",
+        id: "imageType",
+        segmented: {
+            default: "resource",
+            items: [
+                {
+                    title: "Resource",
+                    value: "resource",
+                },
+                {
+                    title: "Custom",
+                    value: "custom",
+                },
+                {
+                    title: "CMS",
+                    value: "cms",
+                },
+            ],
+        },
+    },
+    {
+        title: "Mode",
+        id: "imageMode",
+        segmented: {
+            default: "light",
+            items: [
+                {
+                    icon: "sun.max",
+                    value: "light",
+                },
+                {
+                    icon: "moon",
+                    value: "dark",
+                },
+            ],
+        },
+    },
+    {
+        visible: "imageType == 'custom' && imageMode == 'light'",
+        title: "Source",
+        id: "imageCustomSource",
+        text: {
+            default: "",
+        },
+    },
+    {
+        visible: "imageType == 'custom' && imageMode == 'dark'",
+        title: "Source",
+        id: "imageCustomSourceDark",
+        text: {
+            default: "",
+        },
+    },
+    {
+        visible: "imageType == 'cms' && imageMode == 'light'",
+        title: "Field",
+        id: "imageCmsField",
+        text: {
+            default: "{{item.image.src}}"
+        },
+    },
+    {
+        visible: "imageType == 'cms' && imageMode == 'dark'",
+        title: "Field",
+        id: "imageCmsFieldDark",
+        text: {
+            default: "{{item.image.src}}"
+        },
+    },
+    {
+        visible: "imageType == 'resource' && imageMode == 'light'",
+        title: "Image",
+        id: "image",
+        resource: {},
+    },
+    {
+        visible: "imageType == 'resource' && imageMode == 'dark'",
+        title: "Image",
+        id: "imageDark",
+        resource: {},
+    },
+    {
+        title: "Alt",
+        id: "imageAlt",
+        responsive: false,
+        text: {
+            subtitle: "Used for SEO and accessibility",
+            default: "",
+        },
+    },
+];
+
+export default Image;