@scalar/api-client/dist/components/Form/Form.vue.js

the open source API testing client

import { defineComponent as b, useId as v, createBlock as r, openBlock as l, createSlots as c, withCtx as o, createElementVNode as n, createCommentVNode as y, unref as t, createElementBlock as m, Fragment as h, renderList as g, normalizeClass as V, createVNode as p, toDisplayString as u, renderSlot as w } from "vue";
import { ScalarIcon as E } from "@scalar/components";
import C from "../DataTable/DataTable.vue.js";
import S from "../DataTable/DataTableInput.vue.js";
import U from "../DataTable/DataTableRow.vue.js";
import $ from "../ViewLayout/ViewLayoutSection.vue.js";
import { useActiveEntities as z } from "../../store/active-entities.js";
const B = { key: 0 }, D = { class: "flex flex-1 flex-col gap-1.5" }, F = ["for"], I = { class: "centered-y bg-b-2 flex-center absolute right-1 z-1 rounded px-1 py-0.5" }, q = /* @__PURE__ */ b({
  __name: "Form",
  props: {
    title: {},
    options: {},
    data: {},
    onUpdate: { type: Function }
  },
  setup(N) {
    const { activeEnvVariables: f, activeEnvironment: k, activeWorkspace: s } = z(), i = v();
    return (e, T) => (l(), r($, { class: "last:rounded-b-lg" }, c({
      default: o(() => [
        n("div", D, [
          Object.keys(e.data).length > 0 && t(s) ? (l(), r(C, {
            key: 0,
            columns: [""],
            class: "rounded-b-lg"
          }, {
            default: o(() => [
              (l(!0), m(h, null, g(e.options, (a, d) => (l(), r(U, {
                key: d,
                class: V({ "border-t": d === 0 })
              }, {
                default: o(() => [
                  p(S, {
                    class: "pr-9",
                    lineWrapping: "",
                    id: t(i),
                    envVariables: t(f),
                    environment: t(k),
                    modelValue: e.data[a.key] ?? "",
                    placeholder: a.placeholder,
                    workspace: t(s),
                    "onUpdate:modelValue": (_) => e.onUpdate(a.key, _)
                  }, c({
                    default: o(() => [
                      n("label", { for: t(i) }, u(a.label), 9, F)
                    ]),
                    _: 2
                  }, [
                    a.key === "description" ? {
                      name: "icon",
                      fn: o(() => [
                        n("div", I, [
                          p(t(E), {
                            icon: "Markdown",
                            size: "lg"
                          })
                        ])
                      ]),
                      key: "0"
                    } : void 0
                  ]), 1032, ["id", "envVariables", "environment", "modelValue", "placeholder", "workspace", "onUpdate:modelValue"])
                ]),
                _: 2
              }, 1032, ["class"]))), 128))
            ]),
            _: 1
          })) : y("", !0)
        ])
      ]),
      _: 2
    }, [
      e.title || e.$slots.title ? {
        name: "title",
        fn: o(() => [
          e.title ? (l(), m("span", B, u(e.title), 1)) : w(e.$slots, "title", { key: 1 })
        ]),
        key: "0"
      } : void 0
    ]), 1024));
  }
});
export {
  q as default
};