Sindbad~EG File Manager

[
  {
    "name": "type",
    "type": "select",
    "label": "Type",
    "importance": "low",
    "widget": "radioGroup",
    "alignment": "horizontal",
    "options": [
      {
        "value": "rectangle",
        "label": "Rectangle"
      },
      {
        "value": "circle",
        "label": "Circle"
      },
      {
        "value": "vertical-line",
        "label": "Vertical line"
      },
      {
        "value": "horizontal-line",
        "label": "Horizontal line"
      }
    ],
    "default": "rectangle"
  },
  {
    "type": "group",
    "name": "shape",
    "widget": "showWhen",
    "expanded": true,
    "showWhen": {
      "rules": [
        {
          "field": "type",
          "equals": [
            "rectangle",
            "circle"
          ]
        }
      ]
    },
    "fields": [
      {
        "name": "fillColor",
        "type": "text",
        "label": "Fill color",
        "importance": "medium",
        "optional": true,
        "default": "#ffffff",
        "widget": "colorSelector",
        "showAplha": true,
        "spectrum": {
          "showInput": true,
          "showAlpha": true,
          "preferredFormat": "rgb"
        },
        "optional": true
      },
      {
        "name": "borderColor",
        "type": "text",
        "label": "Border color",
        "importance": "medium",
        "optional": true,
        "default": "#000000",
        "widget": "colorSelector",
        "spectrum": {
          "showInput": true,
          "showAlpha": true,
          "preferredFormat": "rgb"
        },
        "optional": true
      },
      {
        "name": "borderWidth",
        "type": "select",
        "label": "Border width",
        "importance": "low",
        "default": "0",
        "optional": false,
        "options": [
          {
            "value": "0",
            "label": "0"
          },
          {
            "value": "1",
            "label": "1"
          },
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          },
          {
            "value": "4",
            "label": "4"
          },
          {
            "value": "5",
            "label": "5"
          },
          {
            "value": "6",
            "label": "6"
          },
          {
            "value": "7",
            "label": "7"
          },
          {
            "value": "8",
            "label": "8"
          },
          {
            "value": "9",
            "label": "9"
          },
          {
            "value": "10",
            "label": "10"
          },
          {
            "value": "11",
            "label": "11"
          },
          {
            "value": "12",
            "label": "12"
          },
          {
            "value": "13",
            "label": "13"
          },
          {
            "value": "14",
            "label": "14"
          },
          {
            "value": "15",
            "label": "15"
          },
          {
            "value": "16",
            "label": "16"
          },
          {
            "value": "17",
            "label": "17"
          },
          {
            "value": "18",
            "label": "18"
          },
          {
            "value": "19",
            "label": "19"
          },
          {
            "value": "20",
            "label": "20"
          },
          {
            "value": "21",
            "label": "21"
          },
          {
            "value": "22",
            "label": "22"
          },
          {
            "value": "23",
            "label": "23"
          },
          {
            "value": "24",
            "label": "24"
          }
        ]
      },
      {
        "name": "borderStyle",
        "type": "select",
        "label": "Border style",
        "importance": "low",
        "default": "solid",
        "optional": false,
        "options": [
          {
            "value": "solid",
            "label": "Solid"
          },
          {
            "value": "dotted",
            "label": "Dotted"
          },
          {
            "value": "dashed",
            "label": "Dashed"
          },
          {
            "value": "double",
            "label": "Double"
          },
          {
            "value": "inset",
            "label": "Inset"
          },
          {
            "value": "outset",
            "label": "Outset"
          }
        ]
      },
      {
        "name": "borderRadius",
        "type": "select",
        "label": "Border radius",
        "importance": "low",
        "default": "0",
        "optional": false,
        "options": [
          {
            "value": "0",
            "label": "0"
          },
          {
            "value": "1",
            "label": "1"
          },
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          },
          {
            "value": "4",
            "label": "4"
          },
          {
            "value": "5",
            "label": "5"
          },
          {
            "value": "6",
            "label": "6"
          },
          {
            "value": "7",
            "label": "7"
          },
          {
            "value": "8",
            "label": "8"
          },
          {
            "value": "9",
            "label": "9"
          },
          {
            "value": "10",
            "label": "10"
          },
          {
            "value": "11",
            "label": "11"
          },
          {
            "value": "12",
            "label": "12"
          },
          {
            "value": "13",
            "label": "13"
          },
          {
            "value": "14",
            "label": "14"
          },
          {
            "value": "15",
            "label": "15"
          },
          {
            "value": "16",
            "label": "16"
          },
          {
            "value": "17",
            "label": "17"
          },
          {
            "value": "18",
            "label": "18"
          },
          {
            "value": "19",
            "label": "19"
          },
          {
            "value": "20",
            "label": "20"
          }
        ],
        "widget": "showWhen",
        "showWhen": {
          "rules": [
            {
              "field": "../type",
              "equals": "rectangle"
            }
          ]
        }
      }
    ]
  },
  {
    "type": "group",
    "name": "line",
    "widget": "showWhen",
    "expanded": true,
    "showWhen": {
      "rules": [
        {
          "field": "type",
          "equals": [
            "vertical-line",
            "horizontal-line"
          ]
        }
      ]
    },
    "fields": [
      {
        "name": "borderColor",
        "type": "text",
        "label": "Line color",
        "importance": "medium",
        "optional": true,
        "default": "#000000",
        "widget": "colorSelector",
        "optional": true,
        "spectrum": {
          "showInput": true,
          "showAlpha": true,
          "preferredFormat": "rgb"
        }
      },
      {
        "name": "borderWidth",
        "type": "select",
        "label": "Line width",
        "importance": "low",
        "default": "1",
        "optional": false,
        "options": [
          {
            "value": "1",
            "label": "1"
          },
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          },
          {
            "value": "4",
            "label": "4"
          },
          {
            "value": "5",
            "label": "5"
          },
          {
            "value": "6",
            "label": "6"
          },
          {
            "value": "7",
            "label": "7"
          },
          {
            "value": "8",
            "label": "8"
          },
          {
            "value": "9",
            "label": "9"
          },
          {
            "value": "10",
            "label": "10"
          },
          {
            "value": "11",
            "label": "11"
          },
          {
            "value": "12",
            "label": "12"
          },
          {
            "value": "13",
            "label": "13"
          },
          {
            "value": "14",
            "label": "14"
          },
          {
            "value": "15",
            "label": "15"
          },
          {
            "value": "16",
            "label": "16"
          },
          {
            "value": "17",
            "label": "17"
          },
          {
            "value": "18",
            "label": "18"
          },
          {
            "value": "19",
            "label": "19"
          },
          {
            "value": "20",
            "label": "20"
          },
          {
            "value": "21",
            "label": "21"
          },
          {
            "value": "22",
            "label": "22"
          },
          {
            "value": "23",
            "label": "23"
          },
          {
            "value": "24",
            "label": "24"
          }
        ]
      },
      {
        "name": "borderStyle",
        "type": "select",
        "label": "Line style",
        "importance": "low",
        "default": "solid",
        "optional": false,
        "options": [
          {
            "value": "solid",
            "label": "Solid"
          },
          {
            "value": "dotted",
            "label": "Dotted"
          },
          {
            "value": "dashed",
            "label": "Dashed"
          },
          {
            "value": "double",
            "label": "Double"
          }
        ]
      }
    ]
  }
]