snowy-designer/dist/ui-kit/panel-ui/src/components/ERuleEditor/ERuleItem.vue.js

基于Epic-Designer-Pro版本的设计器,可视化开发页面表单

import { defineComponent as x, computed as s, inject as P, createElementBlock as l, openBlock as r, createElementVNode as i, Fragment as m, renderList as k, createCommentVNode as O, toDisplayString as C, createVNode as d, unref as u } from "vue";
/* empty css                                 */
import j from "../../../../base-ui/src/components/icon/icon.vue.js";
import "radix-vue";
import "clsx";
import "tailwind-merge";
import "lucide-vue-next";
import "../../../../base-ui/src/shadch-ui/button/index.js";
import "@vueuse/core";
import "../../../../base-ui/src/shadch-ui/toast/index.js";
import B from "../../../../base-ui/src/components/node/node.vue.js";
import "../../../../../hooks/src/store/index.js";
import "lodash";
import "../../../../../utils/src/manager/pluginManager.js";
import "monaco-editor";
import "../../../../../utils/src/request/index.js";
import "vuedraggable";
import { triggerOptions as E, typeOptions as I, lenTypeOptions as a } from "./data.js";
const N = { class: "rule-item-main m-t-2 hover:border-primary relative rounded border border-solid border-gray-200 bg-white p-2 transition-all" }, U = {
  key: 0,
  class: "m-t-2 flex first:m-0"
}, D = {
  class: "epic-attr-label",
  title: "校验时机"
}, F = { class: "epic-attr-input" }, ee = /* @__PURE__ */ x({
  __name: "ERuleItem",
  props: {
    rule: {}
  },
  emits: ["change", "delete", "update:rule"],
  setup(c, { emit: h }) {
    const y = c, n = h, t = s({
      get() {
        return y.rule;
      },
      set(e) {
        n("update:rule", e);
      }
    }), b = P("pageManager", {}), v = s(() => Object.entries(b.funcs.value).filter(([e, p]) => typeof p == "function").map(([e]) => ({ label: e, value: e }))), f = [
      {
        componentProps: {
          mode: "multiple",
          multiple: !0,
          options: E,
          placeholder: "校验时机"
        },
        label: "校验时机",
        model: "trigger",
        type: "select"
      },
      {
        label: "自定义规则",
        model: "isValidator",
        type: "switch"
      },
      {
        componentProps: { options: v.value, placeholder: "校验函数" },
        label: "校验函数",
        model: "validator",
        show() {
          return !!t.value.isValidator;
        },
        type: "select"
      },
      {
        componentProps: { options: I, placeholder: "类型" },
        label: "类型",
        model: "type",
        show() {
          return !t.value.isValidator;
        },
        type: "select"
      },
      {
        componentProps: { placeholder: "正则校验" },
        label: "正则校验",
        model: "pattern",
        show() {
          return !t.value.isValidator;
        },
        type: "input"
      },
      {
        componentProps: { min: 0, placeholder: "字段长度" },
        label: "字段长度",
        model: "len",
        show() {
          return a.includes(t.value.type ?? "");
        },
        type: "number"
      },
      {
        componentProps: { min: 0, placeholder: "最小长度" },
        label: "最小长度",
        model: "min",
        show() {
          return a.includes(t.value.type ?? "");
        },
        type: "number"
      },
      {
        componentProps: { min: 0, placeholder: "最大长度" },
        label: "最大长度",
        model: "max",
        show() {
          return a.includes(t.value.type ?? "");
        },
        type: "number"
      },
      {
        componentProps: { placeholder: "校验信息" },
        label: "校验信息",
        model: "message",
        type: "input"
      }
    ];
    function _() {
      const e = t.value;
      e.isValidator ? (delete e.type, delete e.pattern, delete e.len, delete e.min, delete e.max) : delete e.validator, n("change", e);
    }
    function g() {
      n("delete");
    }
    return (e, p) => (r(), l("div", N, [
      (r(), l(m, null, k(f, (o, w) => (r(), l(m, { key: w }, [
        !o.show || o.show() ? (r(), l("div", U, [
          i("div", D, C(o.label), 1),
          i("div", F, [
            d(u(B), {
              modelValue: t.value[o.model],
              "onUpdate:modelValue": (V) => t.value[o.model] = V,
              "component-schema": { ...o, noFormItem: !0 },
              onChange: _
            }, null, 8, ["modelValue", "onUpdate:modelValue", "component-schema"])
          ])
        ])) : O("", !0)
      ], 64))), 64)),
      i("div", {
        class: "rule-btn-delete text-md w-24px h-24px rounded-bl-2 color-white absolute right-0 top-0 flex cursor-pointer items-center justify-center transition-all",
        onClick: g
      }, [
        d(u(j), { name: "icon--epic--delete-outline-rounded" })
      ])
    ]));
  }
});
export {
  ee as default
};