rw-elements-tools 1.2.0

package/controls/core/MenuItem.js

@@ -0,0 +1,187 @@
+const MenuItem = [
+    {
+        title: "Font",
+        id: "globalMenuItemFontFamily",
+        themeFont: {
+            default: {
+                base: {
+                    name: "body",
+                },
+            },
+        },
+    },
+    {
+        title: "Size",
+        id: "globalMenuItemTextStyles",
+        themeTextStyle: {
+            default: {
+                base: {
+                    name: "base",
+                },
+            },
+        },
+    },
+    {
+        title: "Weight",
+        id: "globalMenuItemFontWeight",
+        format: "font-[{{value}}]",
+        slider: {
+            default: "400",
+            items: [
+                { value: "100", title: "Thin" },
+                { value: "200", title: "Extra Light" },
+                { value: "300", title: "Light" },
+                { value: "400", title: "Normal" },
+                { value: "500", title: "Medium" },
+                { value: "600", title: "Semi Bold" },
+                { value: "700", title: "Bold" },
+                { value: "800", title: "Extra Bold" },
+                { value: "900", title: "Black" },
+            ],
+        },
+    },
+    {
+        title: "Letter Spacing",
+        id: "globalMenuItemLetterSpacing",
+        format: "tracking-{{value}}",
+        slider: {
+            default: "normal",
+            items: [
+                { value: "tighter", title: "Tighter" },
+                { value: "tight", title: "Tight" },
+                { value: "normal", title: "Normal" },
+                { value: "wide", title: "Wide" },
+                { value: "wider", title: "Wider" },
+                { value: "widest", title: "Widest" },
+            ],
+        },
+    },
+    {
+        title: "Italic",
+        id: "globalMenuItemItalic",
+        switch: {
+            default: false,
+            trueValue: "italic",
+            falseValue: "normal",
+        },
+    },
+    {
+        divider: {},
+    },
+    {
+        title: "State",
+        id: "globalMenuItemState",
+        responsive: false,
+        segmented: {
+            default: "default",
+            items: [
+                {
+                    title: "Default",
+                    value: "default",
+                },
+                {
+                    title: "Active",
+                    value: "hover",
+                },
+            ],
+        },
+    },
+    {
+        visible: "globalMenuItemState == 'default'",
+        title: "Color",
+        id: "globalMenuItemColor",
+        format: "text-{{value}}/[var(--text-opacity)]",
+        themeColor: {
+            default: {
+                name: "text",
+                brightness: 50,
+            },
+        },
+    },
+    {
+        visible: "globalMenuItemState == 'default'",
+        title: "Opacity",
+        id: "globalMenuItemOpacity",
+        responsive: false,
+        format: "[--text-opacity:{{value}}%]",
+        slider: {
+            default: 100,
+            use: "Slider",
+            units: "%",
+        },
+    },
+    {
+        visible: "globalMenuItemState == 'default'",
+        title: "Shadow",
+        id: "globalMenuItemTextShadow",
+        themeShadow: {
+            mode: "text",
+            default: {
+                base: {
+                    name: "none",
+                },
+            },
+        },
+    },
+    {
+        visible: "globalMenuItemState == 'default'",
+        title: "Underline",
+        id: "globalMenuItemUnderline",
+        switch: {
+            default: false,
+            trueValue: "underline",
+            falseValue: "none",
+        },
+    },
+    {
+        visible: "globalMenuItemState == 'hover'",
+        title: "Color",
+        id: "globalMenuItemHoverColor",
+        format: "hover:text-{{value}}/[var(--text-opacity)] data-[state=active]:text-{{value}}/[var(--text-opacity)]",
+        themeColor: {
+            hover: {
+                name: "brand",
+                brightness: 500,
+            },
+        },
+    },
+    {
+        visible: "globalMenuItemState == 'hover'",
+        title: "Opacity",
+        id: "globalMenuItemHoverOpacity",
+        responsive: false,
+        format: "hover:[--text-opacity:{{value}}%] data-[state=active]:[--text-opacity:{{value}}%]",
+        slider: {
+            default: 100,
+            use: "Slider",
+            units: "%",
+        },
+    },
+    {
+        visible: "globalMenuItemState == 'hover'",
+        title: "Shadow",
+        id: "globalMenuItemHoverTextShadow",
+        format: "hover:{{value}} data-[state=active]:{{value}}",
+        themeShadow: {
+            mode: "text",
+            default: {
+                base: {
+                    name: "none",
+                },
+            },
+        },
+    },
+    {
+        visible: "globalMenuItemState == 'hover'",
+        title: "Underline",
+        id: "globalMenuItemHoverUnderline",
+        format: "hover:{{value}} data-[state=active]:{{value}}",
+        switch: {
+            default: false,
+            trueValue: "underline",
+            falseValue: "none",
+        },
+    },
+];
+
+export default MenuItem;

package/controls/core/ObjectFit.js

@@ -0,0 +1,32 @@
+const ObjectFit = {
+    title: "Object Fit",
+    id: "objectFit",
+    format: "object-{{value}}",
+    select: {
+        default: "cover",
+        items: [
+            {
+                title: "Fill",
+                value: "fill",
+            },
+            {
+                title: "Contain",
+                value: "contain",
+            },
+            {
+                title: "Cover",
+                value: "cover",
+            },
+            {
+                title: "None",
+                value: "none",
+            },
+            {
+                title: "Scale Down",
+                value: "scale-down",
+            },
+        ],
+    },
+};
+
+export default ObjectFit;

package/controls/core/ObjectPosition.js

@@ -0,0 +1,65 @@
+const ObjectPosition = [
+    {
+        title: "Position",
+        id: "objectPosition",
+        select: {
+            default: "object-center",
+            items: [
+                {
+                    value: "object-bottom",
+                    title: "Bottom",
+                },
+                {
+                    value: "object-[center_bottom]",
+                    title: "Bottom Center",
+                },
+                {
+                    value: "object-center",
+                    title: "Center",
+                },
+                {
+                    value: "object-left",
+                    title: "Left",
+                },
+                {
+                    value: "object-[left_center]",
+                    title: "Left Center",
+                },
+                {
+                    value: "object-left-bottom",
+                    title: "Left Bottom",
+                },
+                {
+                    value: "object-left-top",
+                    title: "Left Top",
+                },
+                {
+                    value: "object-right",
+                    title: "Right",
+                },
+                {
+                    value: "object-[right_center]",
+                    title: "Right Center",
+                },
+                {
+                    value: "object-right-bottom",
+                    title: "Right Bottom",
+                },
+                {
+                    value: "object-right-top",
+                    title: "Right Top",
+                },
+                {
+                    value: "object-top",
+                    title: "Top",
+                },
+                {
+                    value: "object-[center_top]",
+                    title: "Top Center",
+                },
+            ],
+        },
+    },
+];
+
+export default ObjectPosition;

package/controls/grid-flex/ActAsGridOrFlexItem.js

@@ -0,0 +1,54 @@
+const ActAsGridOrFlexItem = [
+  {
+    title: "Act As",
+    heading: {}
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs == 'grid'",
+    information: {},
+    title: "Component must be inside a Grid for settings to apply.",
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs == 'flex'",
+    information: {},
+    title: "Component must be inside a Flex for settings to apply.",
+  },
+  {
+    title: "Type",
+    id: "globalGridOrFlexDisplayAs",
+    responsive: false,
+    segmented: {
+      default: "default",
+      items: [
+        { value: "default", title: "Default" },
+        { value: "grid", title: "Grid Item" },
+        { value: "flex", title: "Flex Item" },
+      ]
+    },
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs != 'default'",
+    title: "Settings",
+    id: "globalGridOrFlexItemSettings",
+    responsive: false,
+    segmented: {
+      default: "basic",
+      items: [
+        { value: "basic", title: "Standard" },
+        { value: "advanced", title: "Advanced" },
+      ],
+    },
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs != 'default'",
+    divider: {}
+  },
+  {
+    globalControl: "GridItem"
+  },
+  {
+    globalControl: "FlexItem"
+  }
+]
+
+export default ActAsGridOrFlexItem;

package/controls/grid-flex/ColEnd.js

@@ -0,0 +1,28 @@
+const ColEnd = {
+  id: "globalGridItemColEnd",
+  format: "col-end-{{value}}",
+  title: "End",
+  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" },
+      { value: "13", title: "13" },
+    ],
+  },
+};
+
+export default ColEnd;

package/controls/grid-flex/ColStart.js

@@ -0,0 +1,27 @@
+export const ColStart = {
+  id: "globlaGridItemColStart",
+  format: "col-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 ColStart;

package/controls/grid-flex/Columns.js

@@ -0,0 +1,38 @@
+export const Columns = [
+  {
+    visible: "globalGridOrFlexDisplayAs == 'grid'",
+    title: "Columns",
+    id: "globalGridItemColSpan",
+    format: "col-span-{{value}}",
+    slider: {
+      default: {
+        base: "6",
+      },
+      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: "ColStart"
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs == 'grid' && globalGridOrFlexItemSettings == 'advanced'",
+    globalControl: "ColEnd"
+  }
+];
+
+export default Columns;

package/controls/grid-flex/FlexDirection.js

@@ -0,0 +1,27 @@
+const FlexDirection = {
+    title: "Direction",
+    id: "flexDirection",
+    select: {
+        default: "flex-col",
+        items: [
+            {
+                value: "flex-col",
+                title: "Column",
+            },
+            {
+                value: "flex-col-reverse",
+                title: "Column Reverse",
+            },
+            {
+                value: "flex-row",
+                title: "Row",
+            },
+            {
+                value: "flex-row-reverse",
+                title: "Row Reverse",
+            },
+        ],
+    },
+};
+
+export default FlexDirection;

package/controls/grid-flex/FlexItem.js

@@ -0,0 +1,106 @@
+const FlexItem = [
+  {
+    title: "Alignment",
+    heading: {},
+    visible: "globalGridOrFlexDisplayAs == 'flex'"
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs == 'flex'",
+    globalControl: "AlignSelf"
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs == 'flex'",
+    globalControl: "JustifySelf"
+  },
+  {
+    globalControl: "Order"
+  },
+  {
+    title: "Advanced Settings",
+    heading: {},
+    visible: "globalGridOrFlexDisplayAs == 'flex' && globalGridOrFlexItemSettings == 'advanced'"
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs == 'flex' && globalGridOrFlexItemSettings == 'advanced'",
+    title: "Flex",
+    id: "globalFlexItemFlex",
+    format: "flex-{{value}}",
+    segmented: {
+      default: "none",
+      items: [
+        {
+          value: "auto",
+          title: "Auto"
+        },
+        {
+          title: "None",
+          value: "none"
+        },
+        {
+          title: "1",
+          value: "1"
+        },
+        {
+          title: "Initial",
+          value: "initial"
+        }
+      ]
+    }
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs == 'flex' && globalGridOrFlexItemSettings == 'advanced'",
+    title: "Grow",
+    id: "globalFlexItemGrow",
+    segmented: {
+      default: "",
+      items: [
+        {
+          value: "",
+          title: "Auto"
+        },
+        {
+          title: "Grow",
+          value: "grow"
+        },
+        {
+          title: "No Grow",
+          value: "grow-0"
+        }
+      ]
+    }
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs == 'flex' && globalGridOrFlexItemSettings == 'advanced'",
+    title: "Shrink",
+    id: "globalFlexItemShrink",
+    segmented: {
+      default: "",
+      items: [
+        {
+          value: "",
+          title: "Auto"
+        },
+        {
+          title: "Shrink",
+          value: "shrink"
+        },
+        {
+          title: "No Shrink",
+          value: "shrink-0"
+        }
+      ]
+    }
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs == 'flex' && globalGridOrFlexItemSettings == 'advanced'",
+    title: "Basis",
+    id: "globalFlexItemBasis",
+    format: "basis-{{value}}",
+    themeSpacing: {
+      mode: "single",
+      default: "auto"
+    }
+  },
+]
+
+export default FlexItem;

package/controls/grid-flex/GridItem.js

@@ -0,0 +1,41 @@
+const GridItem = [
+  {
+    visible: "globalGridOrFlexDisplayAs == 'grid' && globalGridOrFlexItemSettings == 'advanced'",
+    title: "Columns",
+    heading: {}
+  },
+  {
+    globalControl: "Columns"
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs == 'grid' && globalGridOrFlexItemSettings == 'advanced'",
+    divider: {}
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs == 'grid' && globalGridOrFlexItemSettings == 'advanced'",
+    title: "Rows",
+    heading: {}
+  },
+  {
+    globalControl: "Rows"
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs == 'grid' && globalGridOrFlexItemSettings == 'advanced'",
+    divider: {}
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs == 'grid' && globalGridOrFlexItemSettings == 'advanced'",
+    title: "Alignment",
+    heading: {}
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs == 'grid' && globalGridOrFlexItemSettings == 'advanced'",
+    globalControl: "AlignSelf"
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs == 'grid' && globalGridOrFlexItemSettings == 'advanced'",
+    globalControl: "JustifySelf"
+  }
+]
+
+export default GridItem;

package/controls/grid-flex/Order.js

@@ -0,0 +1,45 @@
+const Order = [
+  {
+    visible: "globalGridOrFlexDisplayAs != 'default' && globalGridOrFlexItemSettings == 'advanced'",
+    title: "Order",
+    id: "globalGridOrFlexItemOrder",
+    format: "order-{{value}}",
+    segmented: {
+      default: "none",
+      items: [
+        {
+          value: "none",
+          title: "Auto"
+        },
+        {
+          value: "first",
+          title: "First"
+        },
+        {
+          value: "last",
+          title: "Last"
+        },
+        {
+          value: "custom",
+          title: "Custom"
+        }
+      ]
+    }
+  },
+  {
+    visible: "globalGridOrFlexDisplayAs != 'default' && globalGridOrFlexItemSettings == 'advanced' && globalGridOrFlexItemOrder == 'custom'",
+    title: "Custom",
+    id: "globalGridOrFlexItemOrderCustom",
+    format: "order-[{{value}}]",
+    number: {
+      default: 1
+    }
+  },
+  {
+    title: "Requires other grid items to have an order value set.",
+    information: {},
+    visible: "globalGridOrFlexDisplayAs != 'default' && globalGridOrFlexItemSettings == 'advanced' && globalGridOrFlexItemOrder == 'custom'"
+  }
+]
+
+export default Order;

package/controls/grid-flex/RowEnd.js

@@ -0,0 +1,28 @@
+const RowEnd = {
+  id: "globalGridItemRowEnd",
+  format: "row-end-{{value}}",
+  title: "End",
+  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" },
+      { value: "13", title: "13" },
+    ],
+  },
+};
+
+export default RowEnd;