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

Farris Vue, a Farris Design based Vue3 component library.

import { computed as s, defineComponent as N, ref as n, watch as F, createVNode as t, Fragment as K, inject as X, onMounted as Y } from "vue";
import { resolveAppearance as E, createPropsResolver as V } from "../dynamic-resolver/index.esm.js";
import { useDesignerComponent as H } from "../designer-canvas/index.esm.js";
import { withInstall as J } from "../common/index.esm.js";
const Q = /* @__PURE__ */ new Map([
  ["appearance", E]
]);
function U(e, o, u) {
  return o;
}
const Z = "https://json-schema.org/draft/2020-12/schema", _ = "https://farris-design.gitee.io/progress.schema.json", ee = "progress", te = "A Farris Component", se = "object", re = {
  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
  }
}, ne = [
  "id",
  "type"
], oe = {
  $schema: Z,
  $id: _,
  title: ee,
  description: te,
  type: se,
  properties: re,
  required: ne
}, ae = "progress", ce = "A Farris Component", le = "object", ie = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  }
}, ue = {
  title: ae,
  description: ce,
  type: le,
  categories: ie
}, L = {
  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, o) => `${e}%` }
}, M = V(L, oe, Q, U, ue);
function ge(e) {
  function o(f) {
    return +f.replace("%", "");
  }
  function u(f) {
    let a = [];
    return Object.keys(f).forEach((l) => {
      const i = f[l], m = o(l);
      isNaN(m) || a.push({
        key: m,
        value: i
      });
    }), a = a.sort((l, i) => l.key - i.key), a;
  }
  const g = s(() => !!e.strokeColor && typeof e.strokeColor != "string"), d = s(() => {
    const { from: f = "#59a1ff", to: a = "#59a1ff", direction: l = "to right", ...i } = e.strokeColor;
    if (Object.keys(i).length !== 0) {
      const m = u(i).map(({ key: C, value: b }) => `${b} ${C}%`).join(", ");
      return `linear-gradient(${l}, ${m})`;
    }
    return `linear-gradient(${l}, ${f}, ${a})`;
  }), c = s(() => u(e.strokeColor).map(({ key: f, value: a }) => ({ offset: `${f}%`, color: a })));
  return {
    isGradient: g,
    linearGradient: d,
    circleGradient: c
  };
}
function de(e) {
  return { strokeWidth: s(() => e.strokeWidth || (e.progressType === "line" && e.size !== "small" ? 8 : 6)) };
}
function fe(e) {
  return { formatPercentageText: s(() => e.format(e.percent, e.successPercent)) };
}
function pe(e, o, u, g) {
  const { isCircleStyle: d } = o, { isGradient: c, linearGradient: f } = u, { strokeWidth: a } = g, l = s(() => {
    const r = {
      "f-progress": !0,
      "f-progress-line": e.progressType === "line",
      "ant-progress-small": e.size === "small",
      "f-progress-show-info": e.showInfo,
      "f-progress-circle": d.value
    }, y = `f-progress-status-${e.progressStatus}`;
    return r[y] = !0, r;
  }), i = s(() => ({
    width: `${e.width}px`,
    height: `${e.width}px`,
    "font-size": `${e.width * 0.15 + 6}px`,
    "f-progress-circle-gradient": c.value
  })), m = s(() => ({
    "f-progress-inner": !0,
    "f-progress-circle-gradient": c.value
  })), C = 0, b = s(() => C + 1), x = s(() => {
    const r = 50 - a.value / 2, y = e.gapPosition || (e.progressType === "circle" ? "top" : "bottom");
    let v = 0, h = -r, P = 0, k = r * -2;
    switch (y) {
      case "left":
        v = -r, h = 0, P = r * 2, k = 0;
        break;
      case "right":
        v = r, h = 0, P = r * -2, k = 0;
        break;
      case "bottom":
        h = r, k = r * 2;
        break;
    }
    return `M 50,50 m ${v},${h}
                a ${r},${r} 0 1 1 ${P},${-k}
                a ${r},${r} 0 1 1 ${-P},${k}`;
  }), I = s(() => {
    const r = 50 - a.value / 2, y = Math.PI * 2 * r, v = e.gapDegree || (e.progressType === "circle" ? 0 : 75);
    return {
      strokeDasharray: `${y - v}px ${y}px`,
      strokeDashoffset: `-${v / 2}px`,
      transition: "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
    };
  }), j = s(() => {
    const r = 50 - a.value / 2, y = Math.PI * 2 * r, v = e.gapDegree || (e.progressType === "circle" ? 0 : 75), h = e.successPercent !== void 0 && e.successPercent !== null ? [e.successPercent, e.percent] : [e.percent];
    return h.map((P, k) => {
      const S = h.length === 2 && k === 0;
      return {
        stroke: c.value && !S ? `url(#gradient-${b.value})` : null,
        strokePathStyle: {
          stroke: c.value ? null : S ? "default" : e.strokeColor,
          transition: "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
          strokeDasharray: `${(P || 0) / 100 * (y - v)}px ${y}px`,
          strokeDashoffset: `-${v / 2}px`
        }
      };
    }).reverse();
  }), w = s(() => ({
    width: `${e.percent}%`,
    "border-radius": e.strokeLinecap === "round" ? "100px" : "0",
    background: c.value ? null : e.strokeColor,
    "background-image": c.value ? f.value : null,
    height: `${a.value}px`
  }));
  return {
    progressClass: l,
    inCircleProgressBarStyle: i,
    inCircleProgressBarClass: m,
    pathString: x,
    trailPathStyle: I,
    progressCirclePaths: j,
    gradientId: b,
    inlineProgressBackgroundStyle: w
  };
}
function ye(e) {
  return { isCircleStyle: s(() => e.progressType === "circle" || e.progressType === "dashboard") };
}
function ve(e) {
  const o = s(() => {
    const d = {
      "f-progress-text-icon": !0,
      "f-icon": !0
    }, c = `f-icon-${e.progressStatus}`;
    return d[c] = !0, d;
  }), u = s(() => {
    const d = {
      "f-progress-text-icon": !0,
      "f-icon": !0
    }, c = e.progressStatus === "success" ? "f-icon-checkmark" : "f-icon-x";
    return d[c] = !0, d;
  }), g = s(() => e.progressStatus === "error" || e.progressStatus === "success");
  return {
    inlineProgrssStatusClass: o,
    circleProgrssStatusClass: u,
    shouldShowStatus: g
  };
}
function he(e) {
  const o = s(() => ({
    width: `${e.successPercent}%`,
    "border-radius": e.strokeLinecap === "round" ? "100px" : "0",
    height: `${e.strokeWidth}px`,
    "background-image": e.enableBackgroundImg ? `url(${e.backgroundImg})` : null
  })), u = s(() => e.successPercent || e.successPercent === 0);
  return { inlineProgressSuccessBackgroundStyle: o, shouldShowSuccessInlineProgressBackground: u };
}
const T = /* @__PURE__ */ N({
  name: "FProgress",
  props: L,
  emits: [],
  setup(e) {
    const o = n(e.progressType), u = n(e.showInfo), g = n(e.percent), d = n(e.strokeLinecap), c = ge(e), {
      isGradient: f,
      circleGradient: a
    } = c, l = de(e), {
      strokeWidth: i
    } = l, {
      formatPercentageText: m
    } = fe(e), C = ye(e), {
      isCircleStyle: b
    } = C, {
      progressClass: x,
      inCircleProgressBarStyle: I,
      inCircleProgressBarClass: j,
      pathString: w,
      trailPathStyle: r,
      progressCirclePaths: y,
      gradientId: v,
      inlineProgressBackgroundStyle: h
    } = pe(e, C, c, l), {
      inlineProgrssStatusClass: P,
      circleProgrssStatusClass: k,
      shouldShowStatus: S
    } = ve(e), {
      inlineProgressSuccessBackgroundStyle: B,
      shouldShowSuccessInlineProgressBackground: G
    } = he(e);
    F(() => e.percent, ($) => {
      g.value = $ || 0;
    });
    function O() {
      return u.value && t("span", {
        class: "f-progress-text"
      }, [S.value ? t("span", {
        class: b.value ? k.value : P.value
      }, null) : m.value]);
    }
    function W() {
      return t(K, null, [t("div", {
        class: "f-progress-outer"
      }, [t("div", {
        class: "f-progress-inner"
      }, [t("div", {
        class: "f-progress-bg",
        style: h.value
      }, null), G.value && t("div", {
        class: "f-progress-success-bg",
        style: B.value
      }, null)])]), O()]);
    }
    function D() {
      return t("div", {
        class: j.value,
        style: I.value
      }, [t("svg", {
        class: "f-progress-circle",
        viewBox: "0 0 100 100"
      }, [f.value && t("defs", null, [t("linearGradient", {
        id: "gradient-" + v.value,
        x1: "100%",
        y1: "0%",
        x2: "0%",
        y2: "0%"
      }, [a.value.map(($) => t("stop", {
        offset: $.offset,
        "stop-color": $.color
      }, null))])]), t("path", {
        class: "f-progress-circle-trail",
        stroke: "#efefef",
        "fill-opacity": "0",
        "stroke-width": i.value,
        d: w.value,
        style: r.value
      }, null), y.value.map(($) => t("path", {
        class: "f-progress-circle-path",
        "fill-opacity": "0",
        d: w.value,
        "stroke-linecap": d.value,
        stroke: $.stroke,
        "stroke-width": g.value ? i.value : 0,
        style: $.strokePathStyle
      }, null))]), O()]);
    }
    return () => t("div", {
      class: x.value
    }, [o.value === "line" && W(), b.value && D()]);
  }
}), ke = /* @__PURE__ */ N({
  name: "FProgressDesign",
  props: L,
  emits: [],
  setup(e, o) {
    const u = n(e.progressStatus), g = n(e.progressType), d = n(e.size), c = n(e.showInfo), f = n(e.strokeWidth), a = n(e.percent), l = n(e.strokeLinecap), i = n(!1), m = n(e.strokeColor), C = n(null), b = n(0), x = n(e.width), I = n(""), j = n([]), w = n(""), r = n([]), y = n(e.enableBackgroundImg), v = n(e.backgroundImg), h = n(), P = X("design-item-context"), k = H(h, P);
    Y(() => {
      h.value.componentInstance = k;
    }), o.expose(k.value), F(() => e.percent, (p) => {
      a.value = p || 0;
    });
    const S = s(() => f.value || (g.value === "line" && d.value !== "small" ? 8 : 6)), B = s(() => g.value === "circle" || g.value === "dashboard"), G = s(() => {
      const p = {
        "f-progress": !0,
        "f-progress-line": g.value === "line",
        "ant-progress-small": d.value === "small",
        "f-progress-show-info": c.value,
        ".f-progress-circle": B.value
      }, A = `f-progress-status-${u.value}`;
      return p[A] = !0, p;
    }), O = s(() => ({
      width: `${a.value}%`,
      "border-radius": l.value === "round" ? "100px" : "0",
      backgroud: i.value ? null : m.value,
      "background-image": i.value ? C.value : null,
      height: `${S.value}px`
    })), W = s(() => ({
      width: `${a.value}%`,
      "border-radius": l.value === "round" ? "100px" : "0",
      height: `${S.value}px`,
      "background-image": y.value ? v.value : null
    })), D = s(() => b.value || b.value === 0);
    function $() {
      return t("div", {
        class: "f-progress-outer"
      }, [t("div", {
        class: "f-progress-inner"
      }, [t("div", {
        class: "f-progress-bg",
        style: O.value
      }, null), D.value && t("div", {
        class: "f-progress-success-bg",
        style: W.value
      }, null)])]);
    }
    const z = s(() => ({
      width: `${x.value}px`,
      height: `${x.value}px`,
      "font-size": `${x.value * 0.15 + 6}px`,
      "f-progress-circle-gradient": i.value
    })), R = s(() => ({}));
    function q() {
      return t("div", {
        class: "f-progress-inner",
        style: z.value
      }, [t("svg", {
        class: "f-progress-circle",
        viewBox: "0 0 100 100"
      }, [i.value && t("defs", null, [t("linearGradient", {
        id: "gradient-" + I.value,
        x1: "100%",
        y1: "0%",
        x2: "0%",
        y2: "0%"
      }, [j.value.map((p) => t("stop", {
        offset: p.offset,
        "stop-color": p.color
      }, null))])]), t("path", {
        class: "f-progress-circle-trail",
        stroke: "#efefef",
        "fill-opacity": "0",
        "stroke-width": S.value,
        d: w.value,
        style: R.value
      }, null), r.value.map((p) => t("path", {
        class: "f-progress-circle-path",
        "fill-opacity": "0",
        d: w.value,
        "stroke-linecap": l.value,
        stroke: p.stroke,
        "stroke-width": a.value ? S.value : 0,
        style: p.strokePathStyle
      }, null))])]);
    }
    return () => t("div", {
      ref: h,
      class: G.value
    }, [g.value === "line" && $(), B.value && q()]);
  }
});
T.register = (e, o, u) => {
  e.progress = T, o.progress = M;
};
T.registerDesigner = (e, o, u) => {
  e.progress = ke, o.progress = M;
};
const $e = J(T);
export {
  T as Progress,
  $e as default,
  L as progressProps,
  M as propsResolver
};