@farris/ui-vue/components/page-header/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

var G = Object.defineProperty;
var _ = (o, e, t) => e in o ? G(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
var g = (o, e, t) => _(o, typeof e != "symbol" ? e + "" : e, t);
import { defineComponent as $, ref as I, computed as b, watch as D, createVNode as u, createTextVNode as O, inject as N, onMounted as K } from "vue";
import { resolveAppearance as J, resolveToolbar as Q, createPropsResolver as q, createPageHeaderEventHandlerResolver as W, getPropsResolverGenerator as z } from "../dynamic-resolver/index.esm.js";
import X from "../response-toolbar/index.esm.js";
import { isMobilePhone as Y, getCustomClass as x } from "../common/index.esm.js";
import Z, { responseToolbarResolver as H } from "../../designer/response-toolbar/index.esm.js";
import { DgControl as j, canvasChanged as ee, refreshCanvas as te, UseTemplateDragAndDropRules as ne, useDesignerComponent as ie, FDesignerInnerItem as se } from "../designer-canvas/index.esm.js";
import { cloneDeep as oe } from "lodash-es";
const V = /* @__PURE__ */ new Map([
  ["appearance", J],
  ["toolbar", Q]
]), re = "https://json-schema.org/draft/2020-12/schema", ae = "https://farris-design.gitee.io/page-header.schema.json", le = "page-header", de = "A Farris Container Component", ce = "object", ue = {
  id: {
    description: "The unique identifier for a Page Header",
    type: "string"
  },
  type: {
    description: "The type string of Page Header component",
    type: "string",
    default: "page-header"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  showIcon: {
    description: "",
    type: "boolean",
    default: !0
  },
  icon: {
    description: "",
    type: "string",
    default: "f-icon-page-title-record"
  },
  iconClass: {
    description: "",
    type: "string",
    default: "f-text-orna-bill"
  },
  title: {
    description: "",
    type: "string",
    default: ""
  },
  subTitle: {
    description: "",
    type: "string",
    default: ""
  },
  toolbar: {
    description: "",
    type: "object",
    properties: {
      appearance: {
        description: "",
        type: "object",
        properties: {
          class: {
            type: "string",
            default: "col-6"
          }
        }
      },
      id: {
        description: "",
        type: "string"
      },
      type: {
        description: "",
        type: "string",
        default: "response-toolbar"
      },
      alignment: {
        description: "The alignment of Response Toolbar Button.",
        type: "string",
        default: "right"
      },
      buttons: {
        description: "The items of Response Toolbar.",
        type: "array",
        default: []
      },
      visible: {
        description: "",
        type: "boolean",
        default: !0
      }
    }
  },
  titleContentClass: {
    description: "",
    type: "string",
    default: ""
  },
  contentClass: {
    description: "",
    type: "string",
    default: ""
  },
  downContentClass: {
    description: "",
    type: "string",
    default: ""
  },
  showPagination: {
    description: "",
    type: "boolean",
    default: !1
  },
  prePaginationDisabled: {
    description: "",
    type: "boolean",
    default: !0
  },
  nextPaginationDisabled: {
    description: "",
    type: "boolean",
    default: !1
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  },
  titleContentHtml: {
    description: "",
    type: "string",
    default: ""
  },
  titleRenderFunction: {
    description: "",
    type: "function",
    default: null
  },
  contentHtml: {
    description: "",
    type: "string",
    default: ""
  },
  contentRenderFunction: {
    description: "",
    type: "function",
    default: null
  },
  downContentHtml: {
    description: "",
    type: "string",
    default: ""
  },
  downContentRenderFunction: {
    description: "",
    type: "function",
    default: null
  }
}, pe = [
  "id",
  "type"
], fe = {
  onLeftClick: "点击左侧按钮事件"
}, M = {
  $schema: re,
  $id: ae,
  title: le,
  description: de,
  type: ce,
  properties: ue,
  required: pe,
  events: fe
};
function S(o, e, t) {
  return e.title = "标题", e.appearance = {
    class: "f-page-header"
  }, e.toolbar = {
    id: `${e.id}-toolbar`,
    type: "response-toolbar",
    buttons: []
  }, e.iconClass = "f-title-icon f-text-orna-bill", e;
}
const R = {
  /**
   * 组件自定义样式
   * @default ''
   */
  customClass: { type: String, default: "" },
  /**
   * 是否显示图标
   * @default true
   */
  showIcon: { type: Boolean, default: !0 },
  /**
   * 图标样式名称
   * @default 'f-icon-page-title-record'
   */
  icon: { type: String, default: "f-icon-page-title-record" },
  /**
   * 图标自定义样式，例如颜色、背景等
   * @default 'f-text-orna-bill'
   */
  iconClass: { type: String, default: "f-text-orna-bill" },
  /**
   * 主标题
   * @default ''
   */
  title: { type: String, default: "" },
  /**
   * 副标题
   * @default ''
   */
  subTitle: { type: String, default: "" },
  /**
   * 按钮组自定义样式
   * @default 'col-6'
   */
  buttonClass: { type: String, default: "col-6" },
  /**
   * 按钮组的标识
   */
  toolbarId: { type: String, default: "" },
  /**
   * 按钮组
   * @default []
   */
  buttons: { type: Array, default: [] },
  /**
   * 按钮大小
   */
  buttonSize: { type: String, default: "" },
  /**
   * 标题区域模板自定义样式
   * @default ''
   */
  titleContentClass: { type: String, default: "" },
  /**
   * 内容区域模板自定义样式
   * @default ''
   */
  contentClass: { type: String, default: "" },
  /**
   * 下方扩展区域模板自定义样式
   * @default ''
   */
  downContentClass: { type: String, default: "" },
  /**
   * 是否显示翻页图标
   * @default false
   */
  showPagination: { type: Boolean, default: !1 },
  /**
   * 向前翻页是否禁用
   * @default true
   */
  prePaginationDisabled: { type: Boolean, default: !0 },
  /**
   * 向后翻页是否禁用
   * @default false
   */
  nextPaginationDisabled: { type: Boolean, default: !1 },
  /**
   * 是否可见
   * @default true
   */
  visible: { type: Boolean, default: !0 },
  /**
   * 控制按钮是否可见
   */
  buttonsVisible: { type: Boolean, default: !0 },
  /**
   * 标题区域
   */
  titleRenderFunction: { type: Function },
  /**
   * 内容区域
   */
  contentRenderFunction: { type: Function },
  /**
   * 下方扩展区域
   */
  downContentRenderFunction: { type: Function }
}, U = Object.assign({}, R, {
  componentId: { type: String, default: "" },
  titleContentHtml: { type: String, default: "" },
  contentHtml: { type: String, default: "" },
  downContentHtml: { type: String, default: "" }
}), Fe = q(R, M, V, S), ke = q(U, M, V, S), ge = W(), me = z(
  R,
  M,
  V,
  S
), he = z(
  U,
  M,
  V,
  S
), B = /* @__PURE__ */ $({
  name: "FPageHeader",
  props: R,
  emits: ["click", "prePaginationClick", "nextPaginationClick"],
  setup(o, e) {
    const t = I(o.buttons), n = Y(), i = (h, f) => {
      e.emit("click", h, f);
    }, a = b(() => {
      const h = {
        "f-page-header": !0,
        "d-none": !o.visible,
        "is-mobile": n
      };
      return x(h, o.customClass);
    }), s = b(() => x({
      "f-title-icon": !0
    }, o.iconClass)), l = b(() => x({
      "f-icon": !0
    }, o.icon)), r = b(() => x({
      "f-title": !0
    }, o.titleContentClass)), d = b(() => x({
      "f-content": !0
    }, o.contentClass)), c = b(() => x({
      "f-page-header-extend": !0
    }, o.downContentClass)), p = b(() => ({
      "f-icon f-icon-arrow-w": !0,
      "f-state-disabled": o.prePaginationDisabled
    })), m = b(() => ({
      "f-icon f-icon-arrow-e": !0,
      "f-state-disabled": o.nextPaginationDisabled
    }));
    function w(h) {
      o.prePaginationDisabled || e.emit("prePaginationClick", h);
    }
    function C(h) {
      o.nextPaginationDisabled || e.emit("nextPaginationClick", h);
    }
    function v() {
      return e.slots.titleContent ? u("div", {
        class: r.value
      }, [O(" "), e.slots.titleContent()]) : o.titleRenderFunction ? u("div", {
        class: r.value
      }, [o.titleRenderFunction()]) : u("div", {
        class: "f-title"
      }, [!n && o.showIcon && o.icon ? u("span", {
        class: s.value
      }, [u("i", {
        class: l.value
      }, null)]) : "", u("h4", {
        class: "f-title-text"
      }, [o.title]), o.subTitle ? u("h5", {
        class: "f-title-subtitle"
      }, [o.subTitle]) : "", o.showPagination ? u("div", {
        class: "f-title-pagination"
      }, [u("span", {
        class: p.value,
        onClick: w
      }, null), u("span", {
        class: m.value,
        onClick: C
      }, null)]) : ""]);
    }
    function y() {
      return e.slots.content ? u("div", {
        class: d.value
      }, [O(" "), e.slots.content()]) : o.contentRenderFunction ? u("div", {
        class: d.value
      }, [o.contentRenderFunction()]) : null;
    }
    function T() {
      if (o.buttons && o.buttons.length > 0)
        return u(X, {
          id: o.toolbarId,
          customClass: o.buttonClass + " f-response-toolbar--in-header",
          visible: o.buttonsVisible,
          items: t.value,
          onClick: i,
          buttonSize: o.buttonSize
        }, null);
    }
    function F() {
      return e.slots.downContent ? u("div", {
        class: c.value
      }, [O(" "), e.slots.downContent()]) : o.downContentRenderFunction ? u("div", {
        class: c.value
      }, [o.downContentRenderFunction()]) : null;
    }
    function k() {
      return n ? u("div", {
        class: "f-page-header--left"
      }, [u("div", {
        class: "f-btn-icon border-0"
      }, [u("span", {
        class: "f-icon f-icon-arrow-chevron-left"
      }, null)])]) : null;
    }
    return D(() => o.buttons, (h) => {
      t.value = h;
    }, {
      deep: !0
    }), () => o.visible ? u("div", {
      class: a.value
    }, [u("nav", {
      class: "f-page-header-base"
    }, [k(), v(), y(), T()]), F()]) : null;
  }
});
function be(o) {
  const { formSchemaUtils: e, formStateMachineUtils: t } = o;
  function n(r, d = "") {
    return {
      path: d + r.code,
      field: r.id,
      fullPath: r.code
    };
  }
  function i(r, d = "") {
    const c = e.getViewModelById(r);
    return c ? c.states.map((p) => n(p, d)) : [];
  }
  function a(r) {
    const d = e.getRootViewModelId(), c = i(r);
    if (r === d)
      return c;
    const p = i(d, "root-component.");
    return [...c, ...p];
  }
  function s(r) {
    return r.binding && r.binding.path || r.id || "";
  }
  function l() {
    return t && t.getRenderStates() || [];
  }
  return { getVariables: a, getControlName: s, getStateMachines: l };
}
class Ce {
  constructor(e) {
    g(this, "sessionVariables", [
      {
        key: "CurrentSysOrgName",
        name: "当前组织Name",
        description: "当前组织Name"
      },
      //   {
      //     key: "CurrentSysOrgCode",
      //     name: "当前组织Code",
      //     description: "当前组织Code"
      //   },
      {
        key: "CurrentSysOrgId",
        name: "当前组织Id",
        description: "当前组织Id"
      },
      {
        key: "CurrentUserName",
        name: "当前用户Name",
        description: "当前用户Name"
      },
      {
        key: "CurrentUserCode",
        name: "当前用户Code",
        description: "当前用户Code"
      },
      {
        key: "CurrentUserId",
        name: "当前用户Id",
        description: "当前用户Id"
      },
      {
        key: "CurrentLanguage",
        name: "当前语言编号",
        description: "当前登录的语言编号，例如简体中文返回'zh-CHS'，英文返回'en'，繁体中文'zh-CHT'"
      }
    ]);
    g(this, "expressionNames", {
      compute: "计算表达式",
      dependency: "依赖表达式",
      validate: "验证表达式",
      dataPicking: "帮助前表达式",
      visible: "可见表达式",
      readonly: "只读表达式",
      required: "必填表达式"
    });
    g(this, "getExpressionConverter", (e, t) => ({
      convertFrom: (n, i, a, s) => {
        const l = a.getExpressionRuleValue(e, t || i);
        return l && l.value || "";
      },
      convertTo: (n, i, a, s, l) => {
        var r;
        if (i === "dataPicking" && (a != null && a.target)) {
          const d = `${a.target}_dataPicking`;
          ((r = a.rules) == null ? void 0 : r.some(
            (p) => p.id === d && p.value
          )) ? n.dictPickingExpressionId = d : delete n.dictPickingExpressionId;
        }
        s.updateExpression(a);
      }
    }));
    this.formSchemaService = e;
  }
  getExpressionRule(e, t) {
    const n = this.getExpressionData();
    if (!n)
      return "";
    const i = n.find((s) => s.target === e);
    if (!i)
      return "";
    const a = i.rules.find((s) => s.type === t);
    return a || "";
  }
  // 获取上下文表单变量
  getContextFormVariables() {
    const { module: e } = this.formSchemaService.getFormSchema();
    if (!e.viewmodels || e.viewmodels.length === 0)
      return [];
    const t = this.formSchemaService.getRootViewModelId(), n = this.formSchemaService.getViewModelById(t);
    if (!n || !n.states || n.states.length === 0)
      return [];
    const i = [];
    return n.states.filter((a) => a.category === "remote").forEach((a) => {
      i.push({
        key: a.code,
        name: a.name,
        description: a.name,
        category: a.category
      });
    }), i;
  }
  createTreeNode(e, t, n = "label") {
    return {
      id: e.id,
      name: e.name,
      bindingPath: e[n],
      parents: t,
      type: "field"
    };
  }
  buildEntityFieldsTreeData(e = null, t) {
    const n = [];
    return e == null || e.forEach((i) => {
      var l;
      const a = this.createTreeNode(i, t);
      let s = [];
      (l = i.type) != null && l.fields && (s = this.buildEntityFieldsTreeData(i.type.fields, [...t, i.label])), n.push({
        data: a,
        children: s,
        expanded: !0
      });
    }), n;
  }
  buildChildEntityTreeData(e = null, t) {
    const n = [];
    return e == null || e.forEach((i) => {
      var r, d;
      const a = this.createTreeNode(i, t);
      a.type = "entity";
      const s = this.buildEntityFieldsTreeData((r = i.type) == null ? void 0 : r.fields, [...t, i.label]), l = this.buildChildEntityTreeData((d = i.type) == null ? void 0 : d.entities, [...t, i.label]);
      l != null && l.length && (s == null || s.push(...l)), n.push({
        data: a,
        children: s || [],
        // 空值回退
        expanded: !0
      });
    }), n;
  }
  getEntitiesTreeData() {
    const e = this.formSchemaService.getSchemaEntities();
    if (!(e != null && e.length))
      return [];
    const t = e[0];
    if (!(t != null && t.type))
      return [];
    const n = this.buildEntityFieldsTreeData(t.type.fields, [t.code]), i = this.buildChildEntityTreeData(t.type.entities, [t.code]);
    return i != null && i.length && (n == null || n.push(...i)), {
      entityCode: t.code,
      fields: [{
        data: this.createTreeNode(t, [], "code"),
        children: n || []
      }]
    };
  }
  getEntitiesAndVariables() {
    return {
      entities: this.getEntitiesTreeData(),
      variables: {
        session: {
          name: "系统变量",
          items: this.sessionVariables,
          visible: !1
        },
        forms: {
          name: "表单变量",
          items: this.getContextFormVariables(),
          visible: !0
        }
      }
    };
  }
  onBeforeOpenExpression(e, t, n) {
    const i = n === "Field" ? e.binding.field : e.id, a = this.getExpressionRule(i, t), s = this.getEntitiesAndVariables(), l = {
      message: ["validate", "required", "dataPicking"].includes(t) && a ? a.message : "",
      ...s
    };
    return a.messageType != null && (l.messageType = a.messageType), l;
  }
  buildRule(e, t, n, i) {
    const { expression: a, message: s, messageType: l } = t, r = {
      id: `${e}_${n}`,
      type: n,
      value: a
    };
    return (n === "validate" || n === "dataPicking" || n === "required") && (r.message = s), n === "dataPicking" && (r.messageType = l), n === "validate" && i && (r.elementId = i), r;
  }
  getExpressionData() {
    const { expressions: e } = this.formSchemaService.getFormSchema().module;
    return e || [];
  }
  updateExpression(e, t, n, i) {
    const a = t === "Field" ? e.binding.field : e.id, s = this.buildRule(a, n, i, e.type === "form-group" ? e.id : "");
    let r = this.getExpressionData().find((c) => c.targetType === t && c.target === a);
    const d = (c) => c.value.trim() === "";
    if (r) {
      const c = r.rules.find((p) => p.id === s.id);
      if (c)
        d(s) ? r.rules = r.rules.filter((p) => p.id !== s.id) : (Object.assign(c, s), i === "validate" && e.type === "form-group" && (c.elementId = e.id));
      else {
        if (d(s))
          return null;
        r.rules = r.rules || [], r.rules.push(s);
      }
    } else {
      if (d(s))
        return null;
      r = {
        target: `${a}`,
        rules: [s],
        targetType: t
      };
    }
    return r;
  }
  getExpressionEditorOptions(e, t, n, i) {
    return n.reduce((a, s) => {
      var r, d;
      const l = t === "Field" ? (r = e == null ? void 0 : e.binding) == null ? void 0 : r.field : e.id;
      return a[s] = {
        hide: t === "Field" ? !!((d = e == null ? void 0 : e.binding) != null && d.field) : !1,
        description: "",
        title: this.expressionNames[s],
        type: "string",
        $converter: this.getExpressionConverter(l),
        refreshPanelAfterChanged: !0,
        editor: {
          type: "expression-editor",
          singleExpand: !1,
          dialogTitle: `${this.expressionNames[s]}编辑器`,
          showMessage: s === "validate" || s === "dataPicking" || s === "required",
          showMessageType: s === "dataPicking",
          beforeOpen: () => this.onBeforeOpenExpression(e, s, t),
          onSubmitModal: (c) => {
            const p = this.updateExpression(e, t, c, s);
            if (i) {
              const m = this.buildRule(l, c, s);
              i(m);
            }
            return p;
          }
        }
      }, a;
    }, {});
  }
  getExpressionInfo(e, t, n) {
    const i = t === "Field" ? e.binding.field : e.id, a = this.getExpressionRule(i, n), s = {
      value: a && a.value,
      targetId: i,
      targetType: t,
      expressionType: n
    };
    return a && a.message && (s.message = a.message), s;
  }
  getExpressionConfig(e, t, n = ["compute", "dependency", "validate"], i) {
    var a;
    return {
      description: "表达式",
      title: "表达式",
      hide: !(e.binding && ((a = e.binding) == null ? void 0 : a.type) === "Form"),
      properties: {
        ...this.getExpressionEditorOptions(e, t, n, i)
      }
    };
  }
  getExpressionOptions(e, t, n) {
    const i = this.getExpressionInfo(e, t, n);
    return {
      dialogTitle: `${this.expressionNames[n] || "表达式"}编辑器`,
      singleExpand: !1,
      showMessage: n === "required",
      beforeOpen: () => this.onBeforeOpenExpression(e, n, t),
      expressionInfo: i
    };
  }
}
class ve {
  constructor(e, t) {
    g(this, "componentId");
    g(this, "viewModelId");
    g(this, "eventsEditorUtils");
    g(this, "formSchemaUtils");
    g(this, "formMetadataConverter");
    g(this, "designViewModelUtils");
    g(this, "designViewModelField");
    g(this, "controlCreatorUtils");
    g(this, "designerHostService");
    g(this, "designerContext");
    g(this, "modalService", null);
    /** 表单规则 */
    g(this, "formRule", null);
    g(this, "schemaService", null);
    g(this, "metadataService", null);
    g(this, "propertyConfig", {
      type: "object",
      categories: {}
    });
    g(this, "expressionProperty");
    var n;
    this.componentId = e, this.designerHostService = t, this.eventsEditorUtils = t.eventsEditorUtils, this.formSchemaUtils = t.formSchemaUtils, this.formMetadataConverter = t.formMetadataConverter, this.viewModelId = ((n = this.formSchemaUtils) == null ? void 0 : n.getViewModelIdByComponentId(e)) || "", this.designViewModelUtils = t.designViewModelUtils, this.controlCreatorUtils = t.controlCreatorUtils, this.metadataService = t.metadataService, this.schemaService = t.schemaService, this.designerContext = t.designerContext, this.modalService = t.modalService, this.expressionProperty = new Ce(this.formSchemaUtils);
  }
  /**
   * 是否在响应式表单中
   */
  inResponsiveForm() {
    var e;
    return !!((e = this.designerContext) != null && e.responsiveForm);
  }
  getFormDesignerInstance() {
    var e, t;
    return (t = (e = this.designerContext) == null ? void 0 : e.instances) == null ? void 0 : t.formDesigner.value;
  }
  getTableInfo() {
    var e;
    return (e = this.schemaService) == null ? void 0 : e.getTableInfoByViewModelId(this.viewModelId);
  }
  setDesignViewModelField(e) {
    var n;
    const t = e.binding && e.binding.type === "Form" && e.binding.field;
    if (t) {
      if (!this.designViewModelField) {
        const i = this.designViewModelUtils.getDgViewModel(this.viewModelId);
        this.designViewModelField = i.fields.find((a) => a.id === t);
      }
      e.updateOn = (n = this.designViewModelField) == null ? void 0 : n.updateOn;
    }
  }
  getBasicPropConfig(e) {
    return {
      description: "Basic Information",
      title: "基本信息",
      properties: {
        id: {
          description: "组件标识",
          title: "标识",
          type: "string",
          readonly: !0
        },
        type: {
          description: "组件类型",
          title: "控件类型",
          type: "select",
          editor: {
            type: "combo-list",
            textField: "name",
            valueField: "value",
            idField: "value",
            editable: !1,
            data: [{ value: e.type, name: j[e.type] && j[e.type].name }]
          }
        }
      }
    };
  }
  getAppearanceConfig(e = null, t = {}, n) {
    const i = {
      title: "外观",
      description: "Appearance"
    }, a = {
      class: {
        title: "class样式",
        type: "string",
        description: "组件的CSS样式",
        $converter: "/converter/appearance.converter",
        parentPropertyID: "appearance"
      },
      style: {
        title: "style样式",
        type: "string",
        description: "组件的样式",
        $converter: "/converter/appearance.converter",
        parentPropertyID: "appearance"
      }
    };
    for (const s in t)
      a[s] = Object.assign(a[s] || {}, t[s]);
    return {
      ...i,
      properties: { ...a },
      setPropertyRelates(s, l) {
        if (s) {
          switch (s && s.propertyID) {
            case "class":
            case "style": {
              ee.value++;
              break;
            }
          }
          n && n(s, e, l);
        }
      }
    };
  }
  /**
   * 
   * @param propertyData 
   * @param propertyTypes 
   * @param propertyName 
   * @param constInfos 
   * @param variableInfos 
   * @param expressionType 指定表达式类型，存在属性和表达式类型不一致的情况
   * @returns 
   */
  getPropertyEditorParams(e, t = [], n = "visible", i = {}, a = {}, s = "") {
    const { getVariables: l, getControlName: r, getStateMachines: d } = be(this.designerHostService), c = this.getRealTargetType(e), p = t && t.length > 0 ? t : ["Const", "Variable", "StateMachine", "Expression"], m = {
      type: "property-editor",
      propertyTypes: p
    };
    return p.map((w) => {
      switch (w) {
        case "Const":
          Object.assign(m, {
            constType: "enum",
            constEnums: [{ id: !0, name: "是" }, { id: !1, name: "否" }]
          }, i);
          break;
        case "Expression":
          m.expressionConfig = this.getExpressionOptions(e, c, s || n);
          break;
        case "StateMachine":
          m.stateMachines = d();
          break;
        case "Variable":
          Object.assign(m, {
            controlName: r(e),
            newVariablePrefix: "is",
            newVariableType: "Boolean",
            variables: l(this.viewModelId),
            parentComponentId: this.componentId === "root-component" ? "" : "root-component",
            onBeforeOpenVariables: (C) => {
              C.value = l(this.viewModelId);
            }
          }, a), this.designerContext.designerMode === "PC_RTC" && (m.newVariablePrefix = "ext_" + m.newVariablePrefix);
          break;
      }
    }), m;
  }
  getVisibleProperty(e, t = "") {
    var a;
    let n = ["Const", "Variable", "StateMachine", "Expression"];
    return t === "gridFieldEditor" ? n = ["Const", "Expression"] : t === "form-group" && !((a = e.binding) != null && a.field) ? n = ["Const", "Variable", "StateMachine", "Custom"] : t === "dataGrid" || t === "treeGrid" || t === "wizard" ? n = ["Const", "Variable", "Expression"] : (e.type.indexOf("toolbar-item") > -1 || t === "form-group") && (n = ["Const", "Variable", "StateMachine", "Custom", "Expression"]), {
      visible: {
        title: "是否可见",
        type: "boolean",
        description: "运行时组件是否可见",
        editor: this.getPropertyEditorParams(e, n, "visible")
      }
    };
  }
  /**
   * 获取行为
   * @param propertyData 
   * @param viewModelId 
   * @returns 
   */
  getBehaviorConfig(e, t = "", n = {}, i) {
    const a = {
      title: "行为",
      description: ""
    }, s = this.getVisibleProperty(e, t);
    for (const r in n)
      s[r] = Object.assign(s[r] || {}, n[r]);
    const l = this;
    return {
      ...a,
      properties: { ...s },
      setPropertyRelates(r, d) {
        if (r) {
          switch (r.propertyID) {
            case "disabled":
            case "readonly":
            case "visible":
              l.afterMutilEditorChanged(e, r);
              break;
          }
          i && i(r, d);
        }
      }
    };
  }
  /**
   * 当多值编辑器变更时
   * @param propertyData 
   * @param changeObject 
   */
  afterMutilEditorChanged(e, t) {
    this.addNewVariableToViewModel(t, this.viewModelId), this.updateExpressionValue(t, e), this.clearExpression(t, e);
  }
  /**
   * 
   * @param propertyId 
   * @param componentInstance 
   * @returns 
   */
  updateElementByParentContainer(e, t) {
    const n = t && t.parent && t.parent.schema;
    if (!n)
      return;
    const i = n.contents.findIndex((s) => s.id === e), a = oe(n.contents[i]);
    n.contents.splice(i, 1), n.contents.splice(i, 0, a), te();
  }
  /**
   * 属性编辑器，在编辑过程中会新增变量，此处需要将新增的变量追加到ViewModel中
   * @param changeObject 
   * @param viewModelId 
   * @returns 
   */
  addNewVariableToViewModel(e, t) {
    const n = e.propertyValue;
    if (!(n && typeof n == "object") || !(n.type === "Variable" && n.isNewVariable))
      return;
    const s = {
      id: n.field,
      category: "locale",
      code: n.fullPath,
      name: n.fullPath,
      type: n.newVariableType || "String",
      isRtcVariable: this.designerContext.designerMode === "PC_RTC" ? !0 : void 0
    };
    delete n.newVariableType, delete n.isNewVariable, this.formSchemaUtils.getVariableByCode(s.code) || this.formSchemaUtils.getViewModelById("root-viewmodel").states.push(s);
  }
  getExpressions() {
    let e = [];
    return this.formRule ? (this.formRule.expressions = this.formRule.expressions || [], e = this.formRule.expressions || []) : e = this.formSchemaUtils.getExpressions(), e;
  }
  /**
   * 更新表达式到expressions节点
   * @param changeObject 
   */
  updateExpressionValue(e, t) {
    const n = e.propertyValue;
    if (!((n && n.type) === "Expression" && n.expressionInfo))
      return;
    const { expressionId: s, expressionInfo: l } = n, { targetId: r, targetType: d, expressionType: c, value: p, message: m } = l, w = this.getExpressions();
    let C = w.find((y) => y.target === r);
    C || (C = { target: r, rules: [], targetType: d }, w.push(C));
    const v = C.rules.find((y) => y.type === c);
    if (v)
      v.id = s, v.value = p, v.message = m, (c === "minDate" || c === "maxDate" || c === "defaultTime") && (v.elementId = t.id);
    else {
      const y = { id: s, type: c, value: p, message: m, elementId: t.id };
      C.rules.push(y);
    }
    delete n.expressionInfo;
  }
  /**
   * 属性类型切换为非表达式后，清除原表达式
   * @param changeObject 
   * @param propertyData 
   * @returns 
   */
  clearExpression(e, t) {
    const n = e.propertyValue;
    if (n && n.type === "Expression")
      return;
    const a = e.propertyID, s = this.getExpressions(), l = t.binding ? t.binding.field : t.id, r = s.find((d) => d.target === l);
    !r || !r.rules || (r.rules = r.rules.filter((d) => d.type !== a));
  }
  getExpressionOptions(e, t, n) {
    return this.expressionProperty.getExpressionOptions(e, t, n);
  }
  getRealTargetType(e) {
    return ["response-toolbar-item", "tab-toolbar-item", "section-toolbar-item", "drawer-toolbar-item"].indexOf(e.type) > -1 ? "Button" : e.binding && e.binding.field ? "Field" : "Container";
  }
  createBaseEventProperty(e) {
    const t = {};
    return t[this.viewModelId] = {
      type: "events-editor",
      editor: {
        initialData: e,
        viewSourceHandle: (n) => {
          var i;
          ((i = n.controller) == null ? void 0 : i.label.indexOf(this.formSchemaUtils.getModule().code)) > -1 && this.eventsEditorUtils.jumpToMethod(n);
        }
      }
    }, t;
  }
}
class ye extends ve {
  constructor(e, t) {
    super(e, t);
  }
  getPropertyConfig(e) {
    return this.propertyConfig.categories.basic = this.getBasicPropConfig(e), this.propertyConfig.categories.appearance = this.getAppearanceProperties(e), this.propertyConfig.categories.template = this.getTemplateConfig(e), this.propertyConfig.categories.behavior = this.getBehaviorConfig(e), this.inResponsiveForm() && (this.propertyConfig.categories.eventsEditor = this.getEventPropConfig(e)), this.propertyConfig;
  }
  getAppearanceProperties(e) {
    return {
      title: "外观",
      description: "",
      properties: {
        class: {
          title: "class样式",
          type: "string",
          description: "组件的CSS样式"
        },
        title: {
          title: "主标题",
          type: "string",
          description: "标题"
        },
        subTitle: {
          title: "副标题",
          type: "string",
          description: "副标题"
        },
        showIcon: {
          title: "是否显示图标",
          type: "boolean",
          description: "是否显示图标",
          refreshPanelAfterChanged: !0
        },
        icon: {
          title: "图标",
          type: "string",
          description: "图标",
          visible: e.showIcon
        },
        iconClass: {
          title: "图标所属单据类别",
          type: "string",
          description: "定义图标的样式，例如颜色、背景等",
          editor: {
            type: "combo-list",
            textField: "value",
            valueField: "key",
            idField: "key",
            editable: !1,
            data: [
              { key: "f-title-icon f-text-orna-bill", value: "单据类" },
              { key: "f-title-icon f-text-orna-dict", value: "字典类" },
              { key: "f-title-icon f-text-orna-manage", value: "管理类" },
              { key: "f-title-icon f-text-orna-query", value: "查询报表类" },
              { key: "f-title-icon f-text-orna-param", value: "系统参数类" }
            ]
          },
          visible: e.showIcon
        }
      },
      setPropertyRelates(t, n) {
        if (t)
          switch (t && t.propertyID) {
            case "title": {
              t.needRefreshControlTree = !0;
              break;
            }
          }
      }
    };
  }
  getTemplateConfig(e) {
    return {
      title: "模板配置",
      description: "",
      properties: {
        titleContentClass: {
          title: "标题模板class",
          type: "string",
          description: "标题模板外层容器的自定义样式"
        },
        titleContentHtml: {
          title: "标题模板",
          type: "string",
          description: "设置标题HTML模板，替代图标和标题文字区域",
          refreshPanelAfterChanged: !0,
          editor: {
            type: "code-editor",
            language: "html"
          }
        },
        contentClass: {
          title: "内容模板class",
          type: "string",
          description: "内容模板外层容器的自定义样式"
        },
        contentHtml: {
          title: "内容模板",
          type: "string",
          description: "设置页头中间区域的模板",
          refreshPanelAfterChanged: !0,
          editor: {
            type: "code-editor",
            language: "html"
          }
        },
        downContentClass: {
          title: "扩展模板class",
          type: "string",
          description: "扩展模板外层容器的自定义样式"
        },
        downContentHtml: {
          title: "扩展模板",
          type: "string",
          description: "设置页头下方区域的模板",
          refreshPanelAfterChanged: !0,
          editor: {
            type: "code-editor",
            language: "html"
          }
        }
      }
    };
  }
  getEventPropConfig(e) {
    const t = [
      {
        label: "onLeftClick",
        name: "点击左侧按钮事件"
      }
    ], n = this, i = n.eventsEditorUtils.formProperties(e, n.viewModelId, t);
    return {
      title: "事件",
      hideTitle: !0,
      properties: n.createBaseEventProperty(i),
      // 这个属性，标记当属性变更得时候触发重新更新属性
      refreshPanelAfterChanged: !0,
      tabId: "commands",
      tabName: "交互",
      setPropertyRelates(s, l) {
        const r = s.propertyValue;
        delete e[n.viewModelId], r && (r.setPropertyRelates = this.setPropertyRelates, n.eventsEditorUtils.saveRelatedParameters(e, n.viewModelId, r.events, r));
      }
    };
  }
}
function xe(o, e) {
  const t = new ne();
  function n(r) {
    return !1;
  }
  function i() {
    const { canMove: r } = t.getTemplateRule(o, e);
    return r;
  }
  function a() {
    const { canDelete: r } = t.getTemplateRule(o, e);
    return r;
  }
  function s() {
    return !0;
  }
  function l(r) {
    const d = new ye(r, e), { schema: c } = o;
    return d.getPropertyConfig(c);
  }
  return {
    canAccepts: n,
    hideNestedPaddingInDesginerView: s,
    getPropsConfig: l,
    checkCanDeleteComponent: a,
    checkCanMoveComponent: i
  };
}
const we = /* @__PURE__ */ $({
  name: "FPageHeaderDesign",
  props: U,
  emits: ["click"],
  setup(o, e) {
    const t = I(), n = N("designer-host-service"), i = N("design-item-context"), a = xe(i, n), s = ie(t, i, a), l = I(i.schema.toolbar || {
      type: "response-toolbar",
      buttons: []
    }), r = I(H(l.value));
    K(() => {
      t.value.componentInstance = s;
    }), D(() => i.schema.toolbar, () => {
      l.value = i.schema.toolbar || {
        type: "response-toolbar",
        buttons: []
      }, r.value = H(l.value);
    }, {
      deep: !0
    });
    const d = b(() => [...r.value.items]);
    function c(f, P, A, E) {
      i && i.setupContext && i.setupContext.emit("selectionChange", f, P, A, E);
    }
    e.expose(s.value);
    function p(f, P) {
      f && P && P.split(" ").reduce((E, L) => (E[L] = !0, E), f);
    }
    const m = b(() => {
      const f = {
        "f-title-icon": !0
      };
      return p(f, o.iconClass), f;
    }), w = b(() => {
      const f = {
        "f-icon": !0
      };
      return p(f, o.icon), f;
    }), C = b(() => {
      const f = {
        "text-right": !0,
        "col-6": !0
      };
      return p(f, o.buttonClass || ""), f;
    }), v = b(() => x({
      "f-title": !0
    }, o.titleContentClass)), y = b(() => x({
      "f-content": !0
    }, o.contentClass)), T = b(() => x({
      "f-page-header-extend": !0
    }, o.downContentClass));
    function F() {
      return o.titleContentHtml ? u("div", {
        class: v.value,
        innerHTML: o.titleContentHtml
      }, null) : u("div", {
        class: "f-title"
      }, [o.showIcon && o.icon ? u("span", {
        class: m.value
      }, [u("i", {
        class: w.value
      }, null)]) : "", u("h4", {
        class: "f-title-text"
      }, [o.title]), o.subTitle ? u("h5", {
        class: "f-title-subtitle"
      }, [o.subTitle]) : ""]);
    }
    function k() {
      return o.contentHtml ? u("div", {
        class: y.value,
        innerHTML: o.contentHtml
      }, null) : null;
    }
    function h() {
      return o.downContentHtml ? u("div", {
        class: T.value,
        innerHTML: o.downContentHtml
      }, null) : null;
    }
    return () => u("div", {
      ref: t
    }, [u("nav", {
      class: "f-page-header-base"
    }, [F(), k(), u(se, {
      class: C.value,
      modelValue: l.value,
      "onUpdate:modelValue": (f) => l.value = f,
      canAdd: !1,
      childType: "response-toolbar-item",
      childLabel: "按钮",
      contentKey: "buttons",
      id: l.value.id,
      componentId: o.componentId,
      onSelectionChange: c
    }, {
      default: () => [u(Z, {
        id: l.value.id,
        customClass: "w-100",
        items: d.value,
        componentId: o.componentId,
        buttonSize: o.buttonSize
      }, null)]
    })]), h()]);
  }
}), Oe = {
  install(o) {
    o.component(B.name, B);
  },
  register(o, e, t, n, i) {
    o["page-header"] = B, e["page-header"] = me(i), n["page-header"] = { eventHandlerResolver: ge };
  },
  registerDesigner(o, e, t, n) {
    o["page-header"] = we, e["page-header"] = he(n);
  }
};
export {
  B as FPageHeader,
  B as PageHeader,
  Oe as default,
  ge as eventHandlerResolver,
  U as pageHeaderDesignerProps,
  R as pageHeaderProps,
  ke as propsDesignResolver,
  he as propsDesignResolverGenerator,
  Fe as propsResolver,
  me as propsResolverGenerator
};