survey-creator-vue/ui-preset-editor/index.es.js

A white-label drag-and-drop form builder for Vue.js that lets you design complex, interactive forms and surveys without writing code. It generates JSON schemas used by the SurveyJS Form Library to render dynamic forms in your Vue.js app.

import { useBase as y, SvComponent as i, ComponentFactory as d } from "survey-vue3-ui";
import { defineComponent as u, computed as h, openBlock as a, createElementBlock as v, Fragment as b, createElementVNode as s, createBlock as x, unref as o, createCommentVNode as f, createVNode as _, toDisplayString as m } from "vue";
import { getLocString as g } from "survey-creator-core";
const C = { class: "svc-flex-column" }, P = { class: "svc-tab-designer" }, k = /* @__PURE__ */ u({
  __name: "Presets",
  props: {
    model: {}
  },
  setup(r) {
    const e = r, n = h(() => {
      var t;
      return (t = e.model) == null ? void 0 : t.model;
    }), l = h(() => {
      var t;
      return (t = e.model) == null ? void 0 : t.creator;
    });
    return y(() => n.value), (t, c) => (a(), v(b, null, [
      s("div", C, [
        l.value.showToolbox ? (a(), x(o(i), {
          key: 0,
          is: "svc-toolbox",
          model: l.value
        }, null, 8, ["model"])) : f("", !0)
      ]),
      s("div", P, [
        _(o(i), {
          is: "survey",
          model: n.value
        }, null, 8, ["model"])
      ])
    ], 64));
  }
}), N = {
  key: 0,
  class: "sps-icon-item",
  style: { display: "flex" }
}, $ = { class: "sps-icon-item__text" }, I = /* @__PURE__ */ u({
  __name: "PresetsIconItem",
  props: {
    item: {}
  },
  setup(r) {
    return (e, n) => e.item ? (a(), v("div", N, [
      _(o(i), {
        is: "sv-svg-icon",
        class: "sps-icon-item__icon",
        size: "auto",
        iconName: e.item.value
      }, null, 8, ["iconName"]),
      s("span", $, m(e.item.title), 1)
    ])) : f("", !0);
  }
}), w = { class: "sps-launch" }, B = { class: "sps-launch__container" }, T = { class: "sps-launch__text" }, D = { class: "sps-launch__text2" }, S = { class: "sps-launch__icon" }, V = { class: "sps-launch__chevron-right-16-x-16" }, z = { class: "sps-launch__icon2" }, E = /* @__PURE__ */ u({
  __name: "PresetsPropertyGrid",
  props: {
    model: {}
  },
  setup(r) {
    const e = r, n = g("presets.plugin.buttonTitle"), l = g("presets.plugin.buttonDescription"), t = () => {
      var c, p;
      (p = (c = e.model).showPresets) == null || p.call(c);
    };
    return (c, p) => (a(), v(b, null, [
      s("div", w, [
        s("button", {
          class: "sps-launch__card",
          onClick: t
        }, [
          s("div", B, [
            s("div", T, m(o(n)), 1),
            s("div", D, m(o(l)), 1)
          ]),
          s("div", S, [
            s("div", V, [
              s("div", z, [
                _(o(i), {
                  is: "sv-svg-icon",
                  size: "auto",
                  iconName: "chevrondown-24x24"
                })
              ])
            ])
          ])
        ])
      ]),
      _(o(i), {
        is: "svc-property-grid",
        model: c.model
      }, null, 8, ["model"])
    ], 64));
  }
});
d.Instance.registerComponent("svc-tab-presets", k);
d.Instance.registerComponent("svc-presets-icon-item", I);
d.Instance.registerComponent("svc-presets-property-grid", E);
export {
  k as TabPresets
};