@farris/ui-vue/components/progress/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { computed as h, defineComponent as C, ref as d, watch as F, createVNode as y, Fragment as Z, inject as x, onMounted as K } from "vue";
import { isPlainObject as E, cloneDeep as q } from "lodash-es";
import { withInstall as I } from "../common/index.esm.js";
const z = {}, V = {};
function W(e) {
  const { properties: r, title: c, ignore: t } = e, n = t && Array.isArray(t), o = Object.keys(r).reduce((a, i) => ((!n || !t.find((v) => v === i)) && (a[i] = r[i].type === "object" && r[i].properties ? W(r[i]) : q(r[i].default)), a), {});
  if (c && (!n || !t.find((a) => a === "id"))) {
    const a = c.toLowerCase().replace(/-/g, "_");
    o.id = `${a}_${Math.random().toString().slice(2, 6)}`;
  }
  return o;
}
function ee(e) {
  const { properties: r, title: c, required: t } = e;
  if (t && Array.isArray(t)) {
    const n = t.reduce((o, a) => (o[a] = r[a].type === "object" && r[a].properties ? W(r[a]) : q(r[a].default), o), {});
    if (c && t.find((o) => o === "id")) {
      const o = c.toLowerCase().replace(/-/g, "_");
      n.id = `${o}_${Math.random().toString().slice(2, 6)}`;
    }
    return n;
  }
  return {
    type: c
  };
}
function _(e, r = {}, c) {
  const t = z[e];
  if (t) {
    let n = ee(t);
    const o = V[e];
    return n = o ? o({ getSchemaByType: _ }, n, r, c) : n, n;
  }
  return null;
}
function re(e, r) {
  const c = W(r);
  return Object.keys(c).reduce((t, n) => (Object.prototype.hasOwnProperty.call(e, n) && (t[n] && E(t[n]) && E(e[n] || !e[n]) ? Object.assign(t[n], e[n] || {}) : t[n] = e[n]), t), c), c;
}
function X(e, r) {
  return Object.keys(e).filter((t) => e[t] != null).reduce((t, n) => {
    if (r.has(n)) {
      const o = r.get(n);
      if (typeof o == "string")
        t[o] = e[n];
      else {
        const a = o(n, e[n], e);
        Object.assign(t, a);
      }
    } else
      t[n] = e[n];
    return t;
  }, {});
}
function te(e, r, c = /* @__PURE__ */ new Map()) {
  const t = re(e, r);
  return X(t, c);
}
function se(e = {}) {
  function r(s, l, u, g) {
    if (typeof u == "number")
      return g[s].length === u;
    if (typeof u == "object") {
      const k = Object.keys(u)[0], b = u[k];
      if (k === "not")
        return Number(g[s].length) !== Number(b);
      if (k === "moreThan")
        return Number(g[s].length) >= Number(b);
      if (k === "lessThan")
        return Number(g[s].length) <= Number(b);
    }
    return !1;
  }
  function c(s, l, u, g) {
    return g[s] && g[s].propertyValue && String(g[s].propertyValue.value) === String(u);
  }
  const t = /* @__PURE__ */ new Map([
    ["length", r],
    ["getProperty", c]
  ]);
  Object.keys(e).reduce((s, l) => (s.set(l, e[l]), s), t);
  function n(s, l) {
    const u = s;
    return typeof l == "number" ? [{ target: u, operator: "length", param: null, value: Number(l) }] : typeof l == "boolean" ? [{ target: u, operator: "getProperty", param: s, value: !!l }] : typeof l == "object" ? Object.keys(l).map((g) => {
      if (g === "length")
        return { target: u, operator: "length", param: null, value: l[g] };
      const k = g, b = l[g];
      return { target: u, operator: "getProperty", param: k, value: b };
    }) : [];
  }
  function o(s) {
    return Object.keys(s).reduce((u, g) => {
      const k = n(g, s[g]);
      return u.push(...k), u;
    }, []);
  }
  function a(s, l) {
    if (t.has(s.operator)) {
      const u = t.get(s.operator);
      return u && u(s.target, s.param, s.value, l) || !1;
    }
    return !1;
  }
  function i(s, l) {
    return o(s).reduce((k, b) => k && a(b, l), !0);
  }
  function v(s, l) {
    const u = Object.keys(s), g = u.includes("allOf"), k = u.includes("anyOf"), b = g || k, p = (b ? s[b ? g ? "allOf" : "anyOf" : "allOf"] : [s]).map(($) => i($, l));
    return g ? !p.includes(!1) : p.includes(!0);
  }
  return { parseValueSchema: v };
}
const ne = {}, oe = {};
se();
function ae(e, r, c = /* @__PURE__ */ new Map(), t = (a, i, v, s) => i, n = {}, o = (a) => a) {
  return z[r.title] = r, V[r.title] = t, ne[r.title] = n, oe[r.title] = o, (a = {}, i = !0) => {
    if (!i)
      return X(a, c);
    const v = te(a, r, c), s = Object.keys(e).reduce((l, u) => (l[u] = e[u].default, l), {});
    return Object.assign(s, v);
  };
}
function ce(e, r) {
  return { customClass: r.class, customStyle: r.style };
}
const le = /* @__PURE__ */ new Map([
  ["appearance", ce]
]);
function ue(e, r, c) {
  return r;
}
const ie = "https://json-schema.org/draft/2020-12/schema", fe = "https://farris-design.gitee.io/progress.schema.json", ge = "progress", pe = "A Farris Component", de = "object", ye = {
  id: {
    description: "The unique identifier for progress",
    type: "string"
  },
  type: {
    description: "The type string of progress",
    type: "string",
    default: "progress"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  binding: {
    description: "",
    type: "object",
    default: {}
  },
  disable: {
    type: "string",
    default: !1
  },
  editable: {
    description: "",
    type: "boolean",
    default: !0
  },
  placeholder: {
    description: "",
    type: "string",
    default: ""
  },
  readonly: {
    description: "",
    type: "boolean",
    default: !1
  },
  require: {
    description: "",
    type: "boolean",
    default: !1
  },
  tabindex: {
    description: "",
    type: "number",
    default: -1
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  }
}, he = [
  "id",
  "type"
], ve = {
  $schema: ie,
  $id: fe,
  title: ge,
  description: pe,
  type: de,
  properties: ye,
  required: he
}, ke = "progress", me = "A Farris Component", be = "object", Pe = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  }
}, Se = {
  title: ke,
  description: me,
  type: be,
  categories: Pe
}, A = {
  progressType: { type: String, default: "line" },
  strokeWidth: { type: Number, default: 0 },
  size: { type: String, default: "default" },
  showInfo: { type: Boolean, default: !0 },
  progressStatus: { type: String, default: "default" },
  successPercent: { type: Number, default: 0 },
  strokeColor: { type: String, default: "" },
  strokeLinecap: { type: String, default: "round" },
  width: { type: Number, default: 100 },
  percent: { type: Number, default: 20 },
  /**
   * 启用成功分段背景图片
   */
  enableBackgroundImg: { type: Boolean, default: !1 },
  /**
   * 成功分段背景图片
   */
  backgroundImg: { type: String, default: "" },
  /**
   * 仪表盘缺口位置
   */
  gapPosition: { type: String },
  /**
   * 仪表盘缺口角度，默认0°
   */
  gapDegree: { type: Number, default: 0 },
  /**
   * 格式化进度信息
   */
  format: { type: Function, default: (e, r) => `${e}%` }
}, Y = ae(A, ve, le, ue, Se);
function $e(e) {
  function r(a) {
    return +a.replace("%", "");
  }
  function c(a) {
    let i = [];
    return Object.keys(a).forEach((v) => {
      const s = a[v], l = r(v);
      isNaN(l) || i.push({
        key: l,
        value: s
      });
    }), i = i.sort((v, s) => v.key - s.key), i;
  }
  const t = h(() => !!e.strokeColor && typeof e.strokeColor != "string"), n = h(() => {
    const { from: a = "#59a1ff", to: i = "#59a1ff", direction: v = "to right", ...s } = e.strokeColor;
    if (Object.keys(s).length !== 0) {
      const l = c(s).map(({ key: u, value: g }) => `${g} ${u}%`).join(", ");
      return `linear-gradient(${v}, ${l})`;
    }
    return `linear-gradient(${v}, ${a}, ${i})`;
  }), o = h(() => c(e.strokeColor).map(({ key: a, value: i }) => ({ offset: `${a}%`, color: i })));
  return {
    isGradient: t,
    linearGradient: n,
    circleGradient: o
  };
}
function we(e) {
  return { strokeWidth: h(() => e.strokeWidth || (e.progressType === "line" && e.size !== "small" ? 8 : 6)) };
}
function je(e) {
  return { formatPercentageText: h(() => e.format(e.percent, e.successPercent)) };
}
function Be(e, r, c, t) {
  const { isCircleStyle: n } = r, { isGradient: o, linearGradient: a } = c, { strokeWidth: i } = t, v = h(() => {
    const p = {
      "f-progress": !0,
      "f-progress-line": e.progressType === "line",
      "ant-progress-small": e.size === "small",
      "f-progress-show-info": e.showInfo,
      "f-progress-circle": n.value
    }, w = `f-progress-status-${e.progressStatus}`;
    return p[w] = !0, p;
  }), s = h(() => ({
    width: `${e.width}px`,
    height: `${e.width}px`,
    "font-size": `${e.width * 0.15 + 6}px`,
    "f-progress-circle-gradient": o.value
  })), l = h(() => ({
    "f-progress-inner": !0,
    "f-progress-circle-gradient": o.value
  })), u = 0, g = h(() => u + 1), k = h(() => {
    const p = 50 - i.value / 2, w = e.gapPosition || (e.progressType === "circle" ? "top" : "bottom");
    let $ = 0, j = -p, T = 0, B = p * -2;
    switch (w) {
      case "left":
        $ = -p, j = 0, T = p * 2, B = 0;
        break;
      case "right":
        $ = p, j = 0, T = p * -2, B = 0;
        break;
      case "bottom":
        j = p, B = p * 2;
        break;
    }
    return `M 50,50 m ${$},${j}
                a ${p},${p} 0 1 1 ${T},${-B}
                a ${p},${p} 0 1 1 ${-T},${B}`;
  }), b = h(() => {
    const p = 50 - i.value / 2, w = Math.PI * 2 * p, $ = e.gapDegree || (e.progressType === "circle" ? 0 : 75);
    return {
      strokeDasharray: `${w - $}px ${w}px`,
      strokeDashoffset: `-${$ / 2}px`,
      transition: "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
    };
  }), N = h(() => {
    const p = 50 - i.value / 2, w = Math.PI * 2 * p, $ = e.gapDegree || (e.progressType === "circle" ? 0 : 75), j = e.successPercent !== void 0 && e.successPercent !== null ? [e.successPercent, e.percent] : [e.percent];
    return j.map((T, B) => {
      const f = j.length === 2 && B === 0;
      return {
        stroke: o.value && !f ? `url(#gradient-${g.value})` : null,
        strokePathStyle: {
          stroke: o.value ? null : f ? "default" : e.strokeColor,
          transition: "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
          strokeDasharray: `${(T || 0) / 100 * (w - $)}px ${w}px`,
          strokeDashoffset: `-${$ / 2}px`
        }
      };
    }).reverse();
  }), M = h(() => ({
    width: `${e.percent}%`,
    "border-radius": e.strokeLinecap === "round" ? "100px" : "0",
    background: o.value ? null : e.strokeColor,
    "background-image": o.value ? a.value : null,
    height: `${i.value}px`
  }));
  return {
    progressClass: v,
    inCircleProgressBarStyle: s,
    inCircleProgressBarClass: l,
    pathString: k,
    trailPathStyle: b,
    progressCirclePaths: N,
    gradientId: g,
    inlineProgressBackgroundStyle: M
  };
}
function Oe(e) {
  return { isCircleStyle: h(() => e.progressType === "circle" || e.progressType === "dashboard") };
}
function Te(e) {
  const r = h(() => {
    const n = {
      "f-progress-text-icon": !0,
      "f-icon": !0
    }, o = `f-icon-${e.progressStatus}`;
    return n[o] = !0, n;
  }), c = h(() => {
    const n = {
      "f-progress-text-icon": !0,
      "f-icon": !0
    }, o = e.progressStatus === "success" ? "f-icon-checkmark" : "f-icon-x";
    return n[o] = !0, n;
  }), t = h(() => e.progressStatus === "error" || e.progressStatus === "success");
  return {
    inlineProgrssStatusClass: r,
    circleProgrssStatusClass: c,
    shouldShowStatus: t
  };
}
function De(e) {
  const r = h(() => ({
    width: `${e.successPercent}%`,
    "border-radius": e.strokeLinecap === "round" ? "100px" : "0",
    height: `${e.strokeWidth}px`,
    "background-image": e.enableBackgroundImg ? `url(${e.backgroundImg})` : null
  })), c = h(() => e.successPercent || e.successPercent === 0);
  return { inlineProgressSuccessBackgroundStyle: r, shouldShowSuccessInlineProgressBackground: c };
}
const L = /* @__PURE__ */ C({
  name: "FProgress",
  props: A,
  emits: [],
  setup(e) {
    const r = d(e.progressType), c = d(e.showInfo), t = d(e.percent), n = d(e.strokeLinecap), o = $e(e), {
      isGradient: a,
      circleGradient: i
    } = o, v = we(e), {
      strokeWidth: s
    } = v, {
      formatPercentageText: l
    } = je(e), u = Oe(e), {
      isCircleStyle: g
    } = u, {
      progressClass: k,
      inCircleProgressBarStyle: b,
      inCircleProgressBarClass: N,
      pathString: M,
      trailPathStyle: p,
      progressCirclePaths: w,
      gradientId: $,
      inlineProgressBackgroundStyle: j
    } = Be(e, u, o, v), {
      inlineProgrssStatusClass: T,
      circleProgrssStatusClass: B,
      shouldShowStatus: f
    } = Te(e), {
      inlineProgressSuccessBackgroundStyle: P,
      shouldShowSuccessInlineProgressBackground: m
    } = De(e);
    F(() => e.percent, (G) => {
      t.value = G || 0;
    });
    function S() {
      return c.value && y("span", {
        class: "f-progress-text"
      }, [f.value ? y("span", {
        class: g.value ? B.value : T.value
      }, null) : l.value]);
    }
    function D() {
      return y(Z, null, [y("div", {
        class: "f-progress-outer"
      }, [y("div", {
        class: "f-progress-inner"
      }, [y("div", {
        class: "f-progress-bg",
        style: j.value
      }, null), m.value && y("div", {
        class: "f-progress-success-bg",
        style: P.value
      }, null)])]), S()]);
    }
    function R() {
      return y("div", {
        class: N.value,
        style: b.value
      }, [y("svg", {
        class: "f-progress-circle",
        viewBox: "0 0 100 100"
      }, [a.value && y("defs", null, [y("linearGradient", {
        id: "gradient-" + $.value,
        x1: "100%",
        y1: "0%",
        x2: "0%",
        y2: "0%"
      }, [i.value.map((G) => y("stop", {
        offset: G.offset,
        "stop-color": G.color
      }, null))])]), y("path", {
        class: "f-progress-circle-trail",
        stroke: "#efefef",
        "fill-opacity": "0",
        "stroke-width": s.value,
        d: M.value,
        style: p.value
      }, null), w.value.map((G) => y("path", {
        class: "f-progress-circle-path",
        "fill-opacity": "0",
        d: M.value,
        "stroke-linecap": n.value,
        stroke: G.stroke,
        "stroke-width": t.value ? s.value : 0,
        style: G.strokePathStyle
      }, null))]), S()]);
    }
    return () => y("div", {
      class: k.value
    }, [r.value === "line" && D(), g.value && R()]);
  }
});
function Me(e, r, c) {
  var B;
  const t = "", n = "", o = d();
  function a() {
    return (r == null ? void 0 : r.schema.componentType) !== "frame";
  }
  function i() {
    return !1;
  }
  function v() {
    return (r == null ? void 0 : r.schema.componentType) !== "frame";
  }
  function s() {
    return (r == null ? void 0 : r.schema.componentType) === "frame";
  }
  function l(f) {
    if (!f || !f.value)
      return null;
    if (f.value.schema && f.value.schema.type === "component")
      return f.value;
    const P = d(f == null ? void 0 : f.value.parent), m = l(P);
    return m || null;
  }
  function u(f = r) {
    var D;
    const { componentInstance: P, designerItemElementRef: m } = f;
    if (!P || !P.value)
      return null;
    const { getCustomButtons: S } = P.value;
    return P.value.canMove || S && ((D = S()) != null && D.length) ? m : u(f.parent);
  }
  function g(f) {
    return !!c;
  }
  function k() {
    return (r == null ? void 0 : r.schema.label) || (r == null ? void 0 : r.schema.title) || (r == null ? void 0 : r.schema.name);
  }
  function b() {
  }
  function N(f, P) {
    var m;
    !f || !P || (m = r == null ? void 0 : r.setupContext) == null || m.emit("dragEnd");
  }
  function M(f, P) {
    const { componentType: m } = f;
    let S = _(m, f, P);
    const D = m.toLowerCase().replace(/-/g, "_");
    return S && !S.id && S.type === m && (S.id = `${D}_${Math.random().toString().slice(2, 6)}`), S;
  }
  function p(f) {
  }
  function w(...f) {
  }
  function $() {
    r != null && r.schema.contents && r.schema.contents.map((f) => {
      let P = f.id;
      f.type === "component-ref" && (P = f.component);
      const m = e.value.querySelectorAll(`#${P}-design-item`);
      m != null && m.length && Array.from(m).map((S) => {
        var D;
        (D = S == null ? void 0 : S.componentInstance) != null && D.value.onRemoveComponent && S.componentInstance.value.onRemoveComponent();
      });
    });
  }
  function j() {
  }
  function T(f) {
  }
  return o.value = {
    canMove: a(),
    canSelectParent: i(),
    canDelete: v(),
    canNested: !s(),
    contents: r == null ? void 0 : r.schema.contents,
    elementRef: e,
    parent: (B = r == null ? void 0 : r.parent) == null ? void 0 : B.componentInstance,
    schema: r == null ? void 0 : r.schema,
    styles: t,
    designerClass: n,
    canAccepts: g,
    getBelongedComponentInstance: l,
    getDraggableDesignItemElement: u,
    getDraggingDisplayText: k,
    getPropConfig: w,
    getDragScopeElement: b,
    onAcceptMovedChildElement: N,
    onChildElementMovedOut: p,
    addNewChildComponentSchema: M,
    triggerBelongedComponentToMoveWhenMoved: d(!1),
    triggerBelongedComponentToDeleteWhenDeleted: d(!1),
    onRemoveComponent: $,
    getCustomButtons: j,
    onPropertyChanged: T
  }, o;
}
const Ne = /* @__PURE__ */ C({
  name: "FProgressDesign",
  props: A,
  emits: [],
  setup(e, r) {
    const c = d(e.progressStatus), t = d(e.progressType), n = d(e.size), o = d(e.showInfo), a = d(e.strokeWidth), i = d(e.percent), v = d(e.strokeLinecap), s = d(!1), l = d(e.strokeColor), u = d(null), g = d(0), k = d(e.width), b = d(""), N = d([]), M = d(""), p = d([]), w = d(e.enableBackgroundImg), $ = d(e.backgroundImg), j = d(), T = x("design-item-context"), B = Me(j, T);
    K(() => {
      j.value.componentInstance = B;
    }), r.expose(B.value), F(() => e.percent, (O) => {
      i.value = O || 0;
    });
    const f = h(() => a.value || (t.value === "line" && n.value !== "small" ? 8 : 6)), P = h(() => t.value === "circle" || t.value === "dashboard"), m = h(() => {
      const O = {
        "f-progress": !0,
        "f-progress-line": t.value === "line",
        "ant-progress-small": n.value === "small",
        "f-progress-show-info": o.value,
        ".f-progress-circle": P.value
      }, U = `f-progress-status-${c.value}`;
      return O[U] = !0, O;
    }), S = h(() => ({
      width: `${i.value}%`,
      "border-radius": v.value === "round" ? "100px" : "0",
      backgroud: s.value ? null : l.value,
      "background-image": s.value ? u.value : null,
      height: `${f.value}px`
    })), D = h(() => ({
      width: `${i.value}%`,
      "border-radius": v.value === "round" ? "100px" : "0",
      height: `${f.value}px`,
      "background-image": w.value ? $.value : null
    })), R = h(() => g.value || g.value === 0);
    function G() {
      return y("div", {
        class: "f-progress-outer"
      }, [y("div", {
        class: "f-progress-inner"
      }, [y("div", {
        class: "f-progress-bg",
        style: S.value
      }, null), R.value && y("div", {
        class: "f-progress-success-bg",
        style: D.value
      }, null)])]);
    }
    const H = h(() => ({
      width: `${k.value}px`,
      height: `${k.value}px`,
      "font-size": `${k.value * 0.15 + 6}px`,
      "f-progress-circle-gradient": s.value
    })), J = h(() => ({}));
    function Q() {
      return y("div", {
        class: "f-progress-inner",
        style: H.value
      }, [y("svg", {
        class: "f-progress-circle",
        viewBox: "0 0 100 100"
      }, [s.value && y("defs", null, [y("linearGradient", {
        id: "gradient-" + b.value,
        x1: "100%",
        y1: "0%",
        x2: "0%",
        y2: "0%"
      }, [N.value.map((O) => y("stop", {
        offset: O.offset,
        "stop-color": O.color
      }, null))])]), y("path", {
        class: "f-progress-circle-trail",
        stroke: "#efefef",
        "fill-opacity": "0",
        "stroke-width": f.value,
        d: M.value,
        style: J.value
      }, null), p.value.map((O) => y("path", {
        class: "f-progress-circle-path",
        "fill-opacity": "0",
        d: M.value,
        "stroke-linecap": v.value,
        stroke: O.stroke,
        "stroke-width": i.value ? f.value : 0,
        style: O.strokePathStyle
      }, null))])]);
    }
    return () => y("div", {
      ref: j,
      class: m.value
    }, [t.value === "line" && G(), P.value && Q()]);
  }
});
L.register = (e, r, c) => {
  e.progress = L, r.progress = Y;
};
L.registerDesigner = (e, r, c) => {
  e.progress = Ne, r.progress = Y;
};
const We = I(L);
export {
  L as Progress,
  We as default,
  A as progressProps,
  Y as propsResolver
};