@farris/ui-vue/components/designer-toolbox/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as C, ref as i, watch as v, createVNode as a } from "vue";
const T = {
  id: { type: String, default: "" },
  dragula: { type: Object }
}, h = [
  {
    type: "input",
    name: "输入类控件",
    items: [
      {
        id: "TextBox",
        type: "input-group",
        name: "文本",
        category: "input"
      },
      {
        id: "MultiTextBox",
        type: "textarea",
        name: "多行文本",
        category: "input"
      },
      {
        id: "DateBox",
        type: "date-picker",
        name: "日期",
        category: "input"
      },
      {
        id: "EnumField",
        type: "combo-list",
        name: "下拉列表",
        category: "input"
      },
      {
        id: "NumericBox",
        type: "number-spinner",
        name: "数值",
        category: "input"
      },
      {
        id: "CheckBox",
        type: "check-box",
        name: "复选框",
        category: "input"
      },
      {
        id: "CheckBoxGroup",
        type: "check-group",
        name: "复选框组",
        category: "input"
      },
      {
        id: "RadioGroup",
        type: "radio-group",
        name: "单选组",
        category: "input"
      },
      {
        id: "SwitchField",
        type: "switch",
        name: "开关",
        category: "input"
      },
      {
        id: "LookupEdit",
        type: "lookup",
        name: "帮助",
        category: "input"
      }
    ]
  },
  {
    type: "dataCollection",
    name: "数据集合类控件",
    items: [
      {
        id: "ResponseForm",
        type: "response-form",
        name: "卡片面板",
        category: "dataCollection"
      },
      {
        id: "DataGrid",
        type: "data-grid",
        name: "表格",
        category: "dataCollection"
      }
    ]
  },
  {
    type: "container",
    name: "容器类控件",
    items: [
      {
        id: "Tab",
        type: "tabs",
        name: "标签页区域",
        category: "container"
      },
      {
        id: "Section",
        type: "section",
        name: "分组面板",
        category: "container"
      },
      {
        id: "Fieldset",
        type: "fieldset",
        name: "分组",
        category: "container"
      }
    ]
  },
  {
    type: "business",
    name: "业务类控件",
    items: [
      {
        id: "QuerySolution",
        type: "query-solution",
        name: "筛选方案",
        category: "container"
      }
    ]
  },
  {
    type: "response-layout",
    name: "布局容器",
    items: [
      {
        id: "ResponseLayout2",
        type: "response-layout",
        name: "1列",
        category: "container",
        feature: {
          splitter: "12"
        },
        icon: "response-layout-1"
      },
      {
        id: "ResponseLayout2",
        type: "response-layout",
        name: "2列",
        category: "container",
        feature: {
          splitter: "6:6"
        },
        icon: "response-layout-2"
      },
      {
        id: "ResponseLayout3",
        type: "response-layout",
        name: "3列",
        category: "container",
        feature: {
          splitter: "4:4:4"
        },
        icon: "response-layout-3"
      },
      {
        id: "ResponseLayout4",
        type: "response-layout",
        name: "4列",
        category: "container",
        feature: {
          splitter: "3:3:3:3"
        },
        icon: "response-layout-4"
      }
    ]
  }
], x = /* @__PURE__ */ C({
  name: "FDesignerToolbox",
  props: T,
  emits: [],
  setup(r) {
    const s = i(h), o = i(r.dragula);
    function c(e, t) {
      t.isHide = !t.isHide;
    }
    function l(e) {
      return {
        "f-icon": !0,
        "f-icon-arrow-60-down": !e.isHide,
        "f-icon-arrow-e": e.isHide
      };
    }
    function d(e) {
      return a("div", {
        class: "card-header",
        onClick: (t) => c(t, e)
      }, [a("div", {
        class: "panel-item-title"
      }, [a("div", {
        class: "f-section-formgroup-legend"
      }, [a("div", {
        class: "f-header px-2 col-form-label"
      }, [a("div", {
        class: "f-toolbar mr-2"
      }, [a("span", {
        class: l(e)
      }, null)]), a("div", {
        class: "f-title f-utils-fill d-flex justify-content-between"
      }, [a("span", null, [e.name])])])])])]);
    }
    function p(e) {
      return {
        "d-none": e.dependentParent || e.hideInControlBox,
        controlPanel: !0,
        "drag-copy": !0,
        "no-drag": e.disable,
        updating: e.updating
      };
    }
    function u(e) {
      const t = {
        farrisControlIcon: !0,
        "fd-i-Family": !0
      }, n = `fd_pc-${e.icon || e.type}`;
      return t[n] = !0, t;
    }
    function y(e, t) {
      return a("div", {
        class: p(e),
        "data-sourceType": "control",
        "data-controlType": e.type,
        "data-controlTypeName": e.name,
        "data-category": e.category,
        "data-feature": e.feature ? JSON.stringify(e.feature) : "",
        "data-fieldType": e.fieldType,
        "data-templateId": e.id,
        "data-templateCategory": e.templateCategory,
        hidden: t.isHide
      }, [a("div", null, [a("div", {
        class: u(e)
      }, null), a("div", {
        class: "controlName"
      }, [e.name])])]);
    }
    function m(e) {
      return a("div", {
        class: "card-body px-2 py-0 border-0 controlCategory no-drop"
      }, [e.items.map((t) => y(t, e))]);
    }
    function f(e) {
      return !e.hideInControlBox && a("div", {
        class: "farris-panel-item card border-0"
      }, [d(e), m(e)]);
    }
    function g(e) {
      if (!e)
        return;
      const t = document.getElementsByClassName("controlCategory");
      t && (e.containers = e.containers.filter((n) => !n.className.includes("controlCategory")), Array.from(t).forEach((n) => {
        e.containers.push(n);
      }));
    }
    return v(() => r.dragula, (e) => {
      var t, n;
      o.value = e, (t = o.value) != null && t.getDragulaInstance && g((n = o.value) == null ? void 0 : n.getDragulaInstance());
    }), () => a("div", {
      class: "controlBox f-utils-fill-flex-column"
    }, [a("div", {
      class: "farris-panel f-utils-fill-flex-column",
      style: "overflow:auto;"
    }, [s.value.map((e) => f(e))])]);
  }
});
export {
  x as FDesignerToolbox
};