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

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as D, ref as b, computed as v, createVNode as d, Fragment as L, inject as I, onMounted as V } from "vue";
import { isPlainObject as N, cloneDeep as _ } from "lodash-es";
import { useDesignerComponent as W } from "../designer-canvas/index.esm.js";
import { useDesignerRules as z } from "../dynamic-form/index.esm.js";
const G = {}, J = {};
function $(t) {
  const { properties: e, title: a, ignore: o } = t, n = o && Array.isArray(o), f = Object.keys(e).reduce((u, m) => ((!n || !o.find((j) => j === m)) && (u[m] = e[m].type === "object" && e[m].properties ? $(e[m]) : _(e[m].default)), u), {});
  if (a && (!n || !o.find((u) => u === "id"))) {
    const u = a.toLowerCase().replace(/-/g, "_");
    f.id = `${u}_${Math.random().toString().slice(2, 6)}`;
  }
  return f;
}
function Q(t, e) {
  const a = $(e);
  return Object.keys(a).reduce((o, n) => (Object.prototype.hasOwnProperty.call(t, n) && (o[n] && N(o[n]) && N(t[n] || !t[n]) ? Object.assign(o[n], t[n] || {}) : o[n] = t[n]), o), a), a;
}
function q(t, e) {
  return Object.keys(t).filter((o) => t[o] != null).reduce((o, n) => {
    if (e.has(n)) {
      const f = e.get(n);
      if (typeof f == "string")
        o[f] = t[n];
      else {
        const u = f(n, t[n], t);
        Object.assign(o, u);
      }
    } else
      o[n] = t[n];
    return o;
  }, {});
}
function U(t, e, a = /* @__PURE__ */ new Map()) {
  const o = Q(t, e);
  return q(o, a);
}
function X(t = {}) {
  function e(s, l, r, c) {
    if (typeof r == "number")
      return c[s].length === r;
    if (typeof r == "object") {
      const g = Object.keys(r)[0], y = r[g];
      if (g === "not")
        return Number(c[s].length) !== Number(y);
      if (g === "moreThan")
        return Number(c[s].length) >= Number(y);
      if (g === "lessThan")
        return Number(c[s].length) <= Number(y);
    }
    return !1;
  }
  function a(s, l, r, c) {
    return c[s] && c[s].propertyValue && String(c[s].propertyValue.value) === String(r);
  }
  const o = /* @__PURE__ */ new Map([
    ["length", e],
    ["getProperty", a]
  ]);
  Object.keys(t).reduce((s, l) => (s.set(l, t[l]), s), o);
  function n(s, l) {
    const r = s;
    return typeof l == "number" ? [{ target: r, operator: "length", param: null, value: Number(l) }] : typeof l == "boolean" ? [{ target: r, operator: "getProperty", param: s, value: !!l }] : typeof l == "object" ? Object.keys(l).map((c) => {
      if (c === "length")
        return { target: r, operator: "length", param: null, value: l[c] };
      const g = c, y = l[c];
      return { target: r, operator: "getProperty", param: g, value: y };
    }) : [];
  }
  function f(s) {
    return Object.keys(s).reduce((r, c) => {
      const g = n(c, s[c]);
      return r.push(...g), r;
    }, []);
  }
  function u(s, l) {
    if (o.has(s.operator)) {
      const r = o.get(s.operator);
      return r && r(s.target, s.param, s.value, l) || !1;
    }
    return !1;
  }
  function m(s, l) {
    return f(s).reduce((g, y) => g && u(y, l), !0);
  }
  function j(s, l) {
    const r = Object.keys(s), c = r.includes("allOf"), g = r.includes("anyOf"), y = c || g, H = (y ? s[y ? c ? "allOf" : "anyOf" : "allOf"] : [s]).map((P) => m(P, l));
    return c ? !H.includes(!1) : H.includes(!0);
  }
  return { parseValueSchema: j };
}
const Y = {}, Z = {};
X();
function K(t, e, a = /* @__PURE__ */ new Map(), o = (u, m, j, s) => m, n = {}, f = (u) => u) {
  return G[e.title] = e, J[e.title] = o, Y[e.title] = n, Z[e.title] = f, (u = {}, m = !0) => {
    if (!m)
      return q(u, a);
    const j = U(u, e, a), s = Object.keys(t).reduce((l, r) => (l[r] = t[r].default, l), {});
    return Object.assign(s, j);
  };
}
function ee(t, e) {
  return { customClass: e.class, customStyle: e.style };
}
const te = /* @__PURE__ */ new Map([
  ["appearance", ee]
]), se = "https://json-schema.org/draft/2020-12/schema", re = "https://farris-design.gitee.io/page-footer.schema.json", oe = "page-footer", ne = "A Farris Input Component", ae = "object", le = {
  id: {
    description: "The unique identifier for a page-footer",
    type: "string"
  },
  type: {
    description: "The type string of page-footer component",
    type: "string",
    default: "page-footer"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  binding: {
    description: "",
    type: "object",
    default: {}
  },
  editable: {
    description: "",
    type: "boolean",
    default: !0
  },
  enableLinkLabel: {
    description: "",
    type: "boolean",
    default: !1
  },
  label: {
    description: "",
    type: "string",
    default: ""
  },
  lableWidth: {
    description: "",
    type: "number"
  },
  placeholder: {
    description: "",
    type: "string",
    default: ""
  },
  readonly: {
    description: "",
    type: "boolean",
    default: !1
  },
  required: {
    description: "",
    type: "boolean",
    default: !1
  },
  tabindex: {
    description: "",
    type: "number",
    default: -1
  },
  textAlign: {
    description: "",
    type: "string",
    enum: [
      "left",
      "middle",
      "right"
    ],
    default: "left"
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  },
  onBlur: {
    description: "",
    type: "string",
    default: ""
  },
  onClickLinkLabel: {
    description: "",
    type: "sting",
    default: ""
  }
}, ce = [
  "id",
  "type"
], ie = {
  $schema: se,
  $id: re,
  title: oe,
  description: ne,
  type: ae,
  properties: le,
  required: ce
};
function ue(t, e, a) {
  return e;
}
const de = "page-footer", pe = "A Farris Component", fe = "object", me = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  },
  behavior: {
    description: "Basic Infomation",
    title: "行为",
    properties: {
      editable: {
        description: "",
        title: "允许编辑",
        type: "boolean"
      },
      readonly: {
        description: "",
        title: "只读",
        type: "string"
      },
      required: {
        description: "",
        title: "必填",
        type: "boolean"
      },
      visible: {
        description: "",
        title: "可见",
        type: "boolean"
      },
      placeholder: {
        description: "",
        title: "提示文本",
        type: "string"
      },
      tabindex: {
        description: "",
        title: "tab索引",
        type: "number"
      },
      textAlign: {
        description: "",
        title: "对齐方式",
        type: "enum",
        editor: {
          type: "combo-list",
          textField: "name",
          valueField: "value",
          data: [
            {
              value: "left",
              name: "左对齐"
            },
            {
              value: "center",
              name: "居中"
            },
            {
              value: "right",
              name: "右对齐"
            }
          ]
        }
      }
    }
  }
}, ge = {
  title: de,
  description: pe,
  type: fe,
  categories: me
}, E = {
  /** 
   * 组件自定义样式
   */
  customClass: { type: String, default: "" },
  /**
   * 是否启用内容区收折
   */
  enableCollapse: { type: Boolean, default: !1 },
  /**
   * 是否默认收折内容区
   */
  collapsed: { type: Boolean, default: !0 },
  /**
   * 收折按钮文本
   */
  collapsedText: { type: String, default: "More" },
  /** 
   * 展开按钮文本
   */
  expandedText: { type: String, default: "More" },
  /**
   * 内容区域样式
   */
  contentClass: { type: String, default: "" },
  /** 
   * 页脚组件样式
   */
  headerClass: { type: String, default: "" },
  /**
   * 上方扩展区域左侧内容区样式
   */
  headerContentClass: { type: String, default: "" },
  /**
   * 上方扩展区域右侧按钮区样式
   */
  headerToolbarClass: { type: String, default: "" },
  /**
   * 是否显示上方扩展区域
   */
  showHeader: { type: String, default: !1 }
}, B = K(E, ie, te, ue, ge), k = /* @__PURE__ */ D({
  name: "FPageFooter",
  props: E,
  emits: [],
  setup(t, e) {
    const a = b(t.collapsed), o = v(() => t.collapsedText), n = b(t.contentClass), f = v(() => t.enableCollapse), u = v(() => t.expandedText), m = b(t.headerClass), j = b(t.headerContentClass), s = b(t.headerToolbarClass), l = v(() => t.showHeader), r = b(t.customClass);
    function c(i) {
      i && i.stopImmediatePropagation(), a.value = !a.value;
    }
    function g() {
      return f.value && d("div", {
        class: "toolbar--collapse",
        onClick: (i) => c(i)
      }, [d("span", {
        class: "toobar--collapse-text"
      }, [a.value ? u.value : o.value]), d("i", {
        class: "f-icon toolbar--collapse-icon"
      }, null)]);
    }
    const y = v(() => {
      const i = {
        "f-toolbar": !0
      };
      return s.value.split(" ").reduce((C, T) => (C[T] = !0, C), i), i;
    });
    function O() {
      return d("div", {
        class: y.value
      }, [e.slots.headerToolbar && e.slots.headerToolbar(), !e.slots.headerToolbar && g()]);
    }
    const M = v(() => {
      const i = {
        "f-content": !0
      };
      return j.value.split(" ").reduce((C, T) => (C[T] = !0, C), i), i;
    });
    function H() {
      return d(L, null, [e.slots.headerContent && d("div", {
        class: M.value
      }, [e.slots.headerContent()]), O()]);
    }
    const w = v(() => {
      const i = {
        "f-cmp-footer-header": !0
      };
      return m.value.split(" ").reduce((C, T) => (C[T] = !0, C), i), i;
    });
    function P() {
      return d("header", {
        class: w.value
      }, [e.slots.header && e.slots.header(), !e.slots.header && H()]);
    }
    const R = v(() => {
      const i = {
        "f-cmp-footer": !0,
        "f-state-collapse": f.value && a.value,
        "f-cmp-footer-accordion": f.value
      };
      return r.value.split(" ").reduce((C, T) => (C[T] = !0, C), i), i;
    }), S = v(() => {
      const i = {
        "f-cmp-footer-content": !0
      };
      return n.value.split(" ").reduce((C, T) => (C[T] = !0, C), i), i;
    });
    return () => d("div", {
      class: R.value
    }, [d("footer", {
      class: "f-cmp-footer-container"
    }, [l.value && P(), d("div", {
      class: S.value
    }, [e.slots.default && e.slots.default()])])]);
  }
}), Ce = /* @__PURE__ */ D({
  name: "FPageFooterDesign",
  props: E,
  emits: [],
  setup(t, e) {
    const a = b(t.collapsed), o = b(t.collapsedText), n = b(t.contentClass), f = b(t.enableCollapse), u = b(t.expandedText), m = b(t.headerClass), j = b(t.headerContentClass), s = b(t.headerToolbarClass), l = b(t.showHeader), r = b(), c = I("design-item-context"), g = I("designer-host-service"), y = z(c, g), O = W(r, c, y);
    V(() => {
      r.value.componentInstance = O;
    }), e.expose(O.value);
    function M(p) {
      p && p.stopImmediatePropagation(), a.value = !a.value;
    }
    function H() {
      return f.value && d("div", {
        class: "toolbar--collapse",
        onClick: (p) => M(p)
      }, [d("span", {
        class: "toobar--collapse-text"
      }, [a.value ? u.value : o.value]), d("i", {
        class: "f-icon toolbar--collapse-icon"
      }, null)]);
    }
    const w = v(() => {
      const p = {
        "f-toolbar": !0
      };
      return s.value.split(" ").reduce((h, A) => (h[A] = !0, h), p), p;
    });
    function P() {
      return d("div", {
        class: w.value
      }, [e.slots.headerToolbar && e.slots.headerToolbar(), !e.slots.headerToolbar && H()]);
    }
    const R = v(() => {
      const p = {
        "f-content": !0
      };
      return j.value.split(" ").reduce((h, A) => (h[A] = !0, h), p), p;
    });
    function S() {
      return d(L, null, [e.slots.headerContent && d("div", {
        class: R.value
      }, [e.slots.headerContent()]), P()]);
    }
    const i = v(() => {
      const p = {
        "f-cmp-footer-header": !0
      };
      return m.value.split(" ").reduce((h, A) => (h[A] = !0, h), p), p;
    });
    function F() {
      return d("header", {
        class: i.value
      }, [e.slots.header && e.slots.header(), !e.slots.header && S()]);
    }
    const C = v(() => {
      const p = {
        "f-cmp-footer": !0,
        "f-state-collapse": f.value && a.value,
        "f-cmp-footer-accordion": f.value
      };
      return m.value.split(" ").reduce((h, A) => (h[A] = !0, h), p), p;
    }), T = v(() => {
      const p = {
        "f-cmp-footer-content": !0
      };
      return n.value.split(" ").reduce((h, A) => (h[A] = !0, h), p), p;
    });
    return () => d("div", {
      ref: r,
      class: C.value
    }, [d("footer", {
      class: "f-cmp-footer-container"
    }, [l.value && F(), d("div", {
      class: T.value
    }, [e.slots.default && e.slots.default()])])]);
  }
}), Te = {
  install(t) {
    t.component(k.name, k);
  },
  register(t, e, a, o) {
    t["page-footer"] = k, e["page-footer"] = B;
  },
  registerDesigner(t, e, a) {
    t["page-footer"] = Ce, e["page-footer"] = B;
  }
};
export {
  k as FPageFooter,
  Te as default,
  E as pageFooterProps,
  B as propsResolver
};