@scalar/api-client/dist/v2/features/collection/components/Overview.vue2.js

the open source API testing client

import { defineComponent as g, computed as x, ref as y, useTemplateRef as w, createBlock as c, openBlock as t, withCtx as r, createElementVNode as l, createElementBlock as p, Fragment as f, createVNode as s, unref as o, createCommentVNode as B, createTextVNode as V, nextTick as h } from "vue";
import { ScalarMarkdown as C, ScalarButton as k } from "@scalar/components";
import { ScalarIconPencil as b } from "@scalar/icons";
import I from "../../settings/components/Section.vue.js";
import S from "../../../components/code-input/CodeInput.vue.js";
const z = { class: "has-focus-visible:bg-b-1 group rounded-lg" }, N = {
  key: 1,
  class: "text-c-3 flex items-center justify-center rounded-lg border p-4"
}, W = /* @__PURE__ */ g({
  __name: "Overview",
  props: {
    documentSlug: {},
    document: {},
    eventBus: {},
    layout: {},
    path: {},
    method: {},
    exampleName: {},
    environment: {},
    securitySchemes: {},
    workspaceStore: {},
    activeWorkspace: {},
    plugins: {},
    customThemes: {},
    collectionType: {}
  },
  setup(u) {
    const d = x(
      () => u.document?.info?.description ?? ""
    ), a = y("preview"), v = w("codeInputRef"), i = async (m) => {
      a.value = m, m === "edit" && (await h(), v.value?.focus());
    };
    return (m, e) => (t(), c(I, null, {
      title: r(() => [...e[5] || (e[5] = [
        V("Description", -1)
      ])]),
      actions: r(() => [
        a.value === "preview" ? (t(), c(o(k), {
          key: 0,
          class: "text-c-2 hover:text-c-1 flex items-center gap-2",
          size: "sm",
          type: "button",
          variant: "outlined",
          onClick: e[0] || (e[0] = (n) => i("edit"))
        }, {
          default: r(() => [
            s(o(b), {
              size: "sm",
              thickness: "1.5"
            }),
            e[6] || (e[6] = l("span", null, "Edit", -1))
          ]),
          _: 1
        })) : B("", !0)
      ]),
      default: r(() => [
        l("div", z, [
          a.value === "preview" ? (t(), p(f, { key: 0 }, [
            d.value.trim().length ? (t(), p(f, { key: 0 }, [
              s(o(C), {
                class: "flex-1 rounded border border-transparent p-1.5 hover:border-(--scalar-background-3)",
                value: d.value,
                withImages: "",
                onDblclick: e[1] || (e[1] = (n) => i("edit"))
              }, null, 8, ["value"]),
              e[7] || (e[7] = l("div", { class: "brightness-lifted bg-b-1 absolute inset-0 -z-1 hidden rounded group-hover:block group-has-focus-visible:hidden" }, null, -1))
            ], 64)) : (t(), p("div", N, [
              s(o(k), {
                class: "hover:bg-b-2 hover:text-c-1 text-c-2 flex items-center gap-2",
                size: "sm",
                variant: "ghost",
                onClick: e[2] || (e[2] = (n) => i("edit"))
              }, {
                default: r(() => [
                  s(o(b), {
                    size: "sm",
                    thickness: "1.5"
                  }),
                  e[8] || (e[8] = l("span", null, "Write a description", -1))
                ]),
                _: 1
              })
            ]))
          ], 64)) : (t(), c(o(S), {
            key: 1,
            ref_key: "codeInputRef",
            ref: v,
            class: "border px-0.5 py-0",
            environment: void 0,
            layout: u.layout,
            modelValue: d.value,
            onBlur: e[3] || (e[3] = (n) => i("preview")),
            "onUpdate:modelValue": e[4] || (e[4] = (n) => u.eventBus.emit("document:update:info", { description: n }))
          }, null, 8, ["layout", "modelValue"]))
        ])
      ]),
      _: 1
    }));
  }
});
export {
  W as default
};