docusaurus-theme-openapi-docs 0.0.0-beta.646 → 0.0.0-beta.651

package/lib/theme/ApiDemoPanel/ParamOptions/index.js

@@ -56,37 +56,49 @@ var __importDefault =
   };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const toolkit_1 = require("@reduxjs/toolkit");
 const FormItem_1 = __importDefault(require("@theme/ApiDemoPanel/FormItem"));
-const FormMultiSelect_1 = __importDefault(
-  require("@theme/ApiDemoPanel/FormMultiSelect")
+const ParamArrayFormItem_1 = __importDefault(
+  require("@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamArrayFormItem")
 );
-const FormSelect_1 = __importDefault(require("@theme/ApiDemoPanel/FormSelect"));
-const FormTextInput_1 = __importDefault(
-  require("@theme/ApiDemoPanel/FormTextInput")
+const ParamBooleanFormItem_1 = __importDefault(
+  require("@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamBooleanFormItem")
+);
+const ParamMultiSelectFormItem_1 = __importDefault(
+  require("@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamMultiSelectFormItem")
+);
+const ParamSelectFormItem_1 = __importDefault(
+  require("@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamSelectFormItem")
+);
+const ParamTextFormItem_1 = __importDefault(
+  require("@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamTextFormItem")
 );
 const hooks_1 = require("@theme/ApiItem/hooks");
-const slice_1 = require("./slice");
 function ParamOption({ param }) {
   if (param.schema?.type === "array" && param.schema.items?.enum) {
-    return react_1.default.createElement(ParamMultiSelectFormItem, {
+    return react_1.default.createElement(ParamMultiSelectFormItem_1.default, {
       param: param,
     });
   }
   if (param.schema?.type === "array") {
-    return react_1.default.createElement(ParamArrayFormItem, { param: param });
+    return react_1.default.createElement(ParamArrayFormItem_1.default, {
+      param: param,
+    });
   }
   if (param.schema?.enum) {
-    return react_1.default.createElement(ParamSelectFormItem, { param: param });
+    return react_1.default.createElement(ParamSelectFormItem_1.default, {
+      param: param,
+    });
   }
   if (param.schema?.type === "boolean") {
-    return react_1.default.createElement(ParamBooleanFormItem, {
+    return react_1.default.createElement(ParamBooleanFormItem_1.default, {
       param: param,
     });
   }
   // integer, number, string, int32, int64, float, double, object, byte, binary,
   // date-time, date, password
-  return react_1.default.createElement(ParamTextFormItem, { param: param });
+  return react_1.default.createElement(ParamTextFormItem_1.default, {
+    param: param,
+  });
 }
 function ParamOptionWrapper({ param }) {
   return react_1.default.createElement(
@@ -195,168 +207,4 @@ function ParamOptions() {
       )
   );
 }
-function ArrayItem({ param, onChange }) {
-  if (param.schema?.items?.type === "boolean") {
-    return react_1.default.createElement(FormSelect_1.default, {
-      options: ["---", "true", "false"],
-      onChange: (e) => {
-        const val = e.target.value;
-        onChange(val === "---" ? undefined : val);
-      },
-    });
-  }
-  return react_1.default.createElement(FormTextInput_1.default, {
-    placeholder: param.description || param.name,
-    onChange: (e) => {
-      onChange(e.target.value);
-    },
-  });
-}
-function ParamArrayFormItem({ param }) {
-  const [items, setItems] = (0, react_1.useState)([]);
-  const dispatch = (0, hooks_1.useTypedDispatch)();
-  function handleAddItem() {
-    setItems((i) => [
-      ...i,
-      {
-        id: (0, toolkit_1.nanoid)(),
-      },
-    ]);
-  }
-  (0, react_1.useEffect)(() => {
-    const values = items.map((item) => item.value).filter((item) => !!item);
-    dispatch(
-      (0, slice_1.setParam)({
-        ...param,
-        value: values.length > 0 ? values : undefined,
-      })
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items]);
-  function handleDeleteItem(itemToDelete) {
-    return () => {
-      const newItems = items.filter((i) => i.id !== itemToDelete.id);
-      setItems(newItems);
-    };
-  }
-  function handleChangeItem(itemToUpdate) {
-    return (value) => {
-      const newItems = items.map((i) => {
-        if (i.id === itemToUpdate.id) {
-          return { ...i, value: value };
-        }
-        return i;
-      });
-      setItems(newItems);
-    };
-  }
-  return react_1.default.createElement(
-    react_1.default.Fragment,
-    null,
-    items.map((item) =>
-      react_1.default.createElement(
-        "div",
-        { key: item.id, style: { display: "flex" } },
-        react_1.default.createElement(ArrayItem, {
-          param: param,
-          onChange: handleChangeItem(item),
-        }),
-        react_1.default.createElement(
-          "button",
-          {
-            className: "openapi-demo__delete-btn",
-            onClick: handleDeleteItem(item),
-          },
-          react_1.default.createElement(
-            "svg",
-            {
-              focusable: "false",
-              preserveAspectRatio: "xMidYMid meet",
-              xmlns: "http://www.w3.org/2000/svg",
-              fill: "currentColor",
-              width: "16",
-              height: "16",
-              viewBox: "0 0 32 32",
-              "aria-hidden": "true",
-            },
-            react_1.default.createElement("path", {
-              d: "M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z",
-            }),
-            react_1.default.createElement("title", null, "Delete")
-          )
-        )
-      )
-    ),
-    react_1.default.createElement(
-      "button",
-      { className: "openapi-demo__thin-btn", onClick: handleAddItem },
-      "Add item"
-    )
-  );
-}
-function ParamSelectFormItem({ param }) {
-  const dispatch = (0, hooks_1.useTypedDispatch)();
-  const options = param.schema?.enum ?? [];
-  return react_1.default.createElement(FormSelect_1.default, {
-    options: ["---", ...options],
-    onChange: (e) => {
-      const val = e.target.value;
-      dispatch(
-        (0, slice_1.setParam)({
-          ...param,
-          value: val === "---" ? undefined : val,
-        })
-      );
-    },
-  });
-}
-function ParamBooleanFormItem({ param }) {
-  const dispatch = (0, hooks_1.useTypedDispatch)();
-  return react_1.default.createElement(FormSelect_1.default, {
-    options: ["---", "true", "false"],
-    onChange: (e) => {
-      const val = e.target.value;
-      dispatch(
-        (0, slice_1.setParam)({
-          ...param,
-          value: val === "---" ? undefined : val,
-        })
-      );
-    },
-  });
-}
-function ParamMultiSelectFormItem({ param }) {
-  const dispatch = (0, hooks_1.useTypedDispatch)();
-  const options = param.schema?.items?.enum ?? [];
-  return react_1.default.createElement(FormMultiSelect_1.default, {
-    options: options,
-    onChange: (e) => {
-      const values = Array.prototype.filter
-        .call(e.target.options, (o) => o.selected)
-        .map((o) => o.value);
-      dispatch(
-        (0, slice_1.setParam)({
-          ...param,
-          value: values.length > 0 ? values : undefined,
-        })
-      );
-    },
-  });
-}
-function ParamTextFormItem({ param }) {
-  const dispatch = (0, hooks_1.useTypedDispatch)();
-  return react_1.default.createElement(FormTextInput_1.default, {
-    placeholder: param.description || param.name,
-    onChange: (e) =>
-      dispatch(
-        (0, slice_1.setParam)({
-          ...param,
-          value:
-            param.in === "path" || param.in === "query"
-              ? e.target.value.replace(/\s/g, "%20")
-              : e.target.value,
-        })
-      ),
-  });
-}
 exports.default = ParamOptions;

package/lib/theme/ApiDemoPanel/Request/_Request.scss

@@ -1,13 +1,15 @@
-.openapi-demo__options-panel {
-  background: var(--openapi-card-background-color);
+.openapi-demo__request-form {
+  background-color: var(--ifm-pre-background);
   border-radius: var(--openapi-card-border-radius);
+  border: 1px solid var(--openapi-demo-border-color);
+  box-shadow: 0 2px 3px hsla(222, 8%, 43%, 0.1),
+    0 8px 16px -10px hsla(222, 8%, 43%, 0.2);
   color: var(--ifm-pre-color);
   line-height: var(--ifm-pre-line-height);
   margin-bottom: var(--ifm-spacing-vertical);
   margin-top: 0;
   overflow: auto;
-  padding-top: 0 !important;
-  padding: var(--ifm-pre-padding);
+  transition: 300ms;
 
   /* hack for view calculation when monaco is hidden */
   position: relative;
@@ -15,34 +17,105 @@
   &:empty {
     display: none;
   }
-}
 
-.openapi-demo__details {
-  margin-bottom: 1rem;
-  background: var(--openapi-card-background-color);
-  border-radius: var(--openapi-card-border-radius);
+  &:hover {
+    box-shadow: 0 0 0 2px rgba(38, 53, 61, 0.15),
+      0 2px 3px hsla(222, 8%, 43%, 0.15),
+      0 16px 16px -10px hsla(222, 8%, 43%, 0.2);
+  }
+
+  .required {
+    font-size: var(--ifm-code-font-size);
+    color: var(--openapi-required);
+
+    &.request-body {
+      padding-left: 0.25rem;
+    }
+  }
 }
 
-.openapi-demo__summary-container {
-  padding: 1rem;
-  list-style-type: none;
+.openapi-demo__request-header-container {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--openapi-demo-border-color);
+  margin: 0;
+  padding: 0.75rem var(--ifm-pre-padding);
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: bold;
+}
 
+.openapi-demo__expand-details-btn {
   &:hover {
     cursor: pointer;
   }
 }
 
-.openapi-demo__summary-content {
-  display: flex;
-  justify-content: space-between;
+.openapi-demo__details-outer-container {
+  padding: 1rem;
+}
+
+.openapi-demo__details-container[open] {
+  .openapi-demo__details-summary::before {
+    transform: rotate(180deg);
+    margin-top: 0.25rem;
+  }
+}
+
+.openapi-demo__details-summary {
+  display: inline-flex;
   align-items: center;
+  padding: 0.35rem 0;
+  font-size: 14px;
+  list-style: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &::before {
+    margin-right: 0.25rem;
+    margin-bottom: 0.25rem;
+    background-image: var(--openapi-demo-caret-bg);
+    border: none !important;
+    transform: rotate(90deg);
+    content: "";
+    height: 0.75rem;
+    width: 0.75rem;
+  }
 }
 
-.openapi-demo__summary-header {
-  margin-bottom: 0;
+.openapi-demo__request-btn {
+  border: none;
+  border-radius: var(--ifm-global-radius);
+  padding: 0.5rem 1rem;
+  margin-top: 1rem;
+  background-color: var(--ifm-color-primary-light);
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 12px;
+  color: white;
+  cursor: pointer;
+  transition: 300ms;
+
+  &:hover {
+    background-color: var(--ifm-color-primary-lightest);
+  }
+
+  &:active {
+    background-color: var(--ifm-color-primary-light);
+  }
 }
 
-.openapi-demo__summary-header > button {
-  margin-bottom: 1rem;
-  margin-right: 1rem;
+// Prevent auto zoom on mobile iOS devices when focusing on input elmenents
+@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-device-width: 1024px) {
+  .prism-code,
+  select,
+  input {
+    font-size: 1rem;
+  }
 }

package/lib/theme/ApiDemoPanel/Request/index.d.ts

@@ -2,5 +2,5 @@
 import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
 declare function Request({ item }: {
     item: NonNullable<ApiItem>;
-}): JSX.Element;
+}): JSX.Element | null;
 export default Request;