@farris/ui-vue 1.7.0-beta.4 → 1.7.0

package/components/progress/index.esm.js

@@ -1,114 +1,6 @@
-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 = {
+import { computed as s, defineComponent as N, ref as C, watch as W, createVNode as o, Fragment as D } from "vue";
+import { withInstall as L } from "../common/index.esm.js";
+const z = {
   progressType: { type: String, default: "line" },
   strokeWidth: { type: Number, default: 0 },
   size: { type: String, default: "default" },
@@ -138,339 +30,242 @@ const Z = "https://json-schema.org/draft/2020-12/schema", _ = "https://farris-de
   /**
    * 格式化进度信息
    */
-  format: { type: Function, default: (e, o) => `${e}%` }
-}, M = V(L, oe, Q, U, ue);
-function ge(e) {
-  function o(f) {
-    return +f.replace("%", "");
+  format: { type: Function, default: (e, a) => `${e}%` }
+};
+function F(e) {
+  function a(c) {
+    return +c.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,
+  function f(c) {
+    let n = [];
+    return Object.keys(c).forEach((l) => {
+      const i = c[l], v = a(l);
+      isNaN(v) || n.push({
+        key: v,
         value: i
       });
-    }), a = a.sort((l, i) => l.key - i.key), a;
+    }), n = n.sort((l, i) => l.key - i.key), n;
   }
-  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;
+  const h = s(() => !!e.strokeColor && typeof e.strokeColor != "string"), u = s(() => {
+    const { from: c = "#59a1ff", to: n = "#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})`;
+      const v = f(i).map(({ key: p, value: S }) => `${S} ${p}%`).join(", ");
+      return `linear-gradient(${l}, ${v})`;
     }
-    return `linear-gradient(${l}, ${f}, ${a})`;
-  }), c = s(() => u(e.strokeColor).map(({ key: f, value: a }) => ({ offset: `${f}%`, color: a })));
+    return `linear-gradient(${l}, ${c}, ${n})`;
+  }), r = s(() => f(e.strokeColor).map(({ key: c, value: n }) => ({ offset: `${c}%`, color: n })));
   return {
-    isGradient: g,
-    linearGradient: d,
-    circleGradient: c
+    isGradient: h,
+    linearGradient: u,
+    circleGradient: r
   };
 }
-function de(e) {
+function K(e) {
   return { strokeWidth: s(() => e.strokeWidth || (e.progressType === "line" && e.size !== "small" ? 8 : 6)) };
 }
-function fe(e) {
+function M(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 = {
+function X(e, a, f, h) {
+  const { isCircleStyle: u } = a, { isGradient: r, linearGradient: c } = f, { strokeWidth: n } = h, l = s(() => {
+    const t = {
       "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;
+      "f-progress-circle": u.value
+    }, g = `f-progress-status-${e.progressStatus}`;
+    return t[g] = !0, t;
   }), 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-circle-gradient": r.value
+  })), v = 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) {
+    "f-progress-circle-gradient": r.value
+  })), p = 0, S = s(() => p + 1), x = s(() => {
+    const t = 50 - n.value / 2, g = e.gapPosition || (e.progressType === "circle" ? "top" : "bottom");
+    let d = 0, y = -t, P = 0, k = t * -2;
+    switch (g) {
       case "left":
-        v = -r, h = 0, P = r * 2, k = 0;
+        d = -t, y = 0, P = t * 2, k = 0;
         break;
       case "right":
-        v = r, h = 0, P = r * -2, k = 0;
+        d = t, y = 0, P = t * -2, k = 0;
         break;
       case "bottom":
-        h = r, k = r * 2;
+        y = t, k = t * 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 `M 50,50 m ${d},${y}
+                a ${t},${t} 0 1 1 ${P},${-k}
+                a ${t},${t} 0 1 1 ${-P},${k}`;
+  }), w = s(() => {
+    const t = 50 - n.value / 2, g = Math.PI * 2 * t, d = e.gapDegree || (e.progressType === "circle" ? 0 : 75);
     return {
-      strokeDasharray: `${y - v}px ${y}px`,
-      strokeDashoffset: `-${v / 2}px`,
+      strokeDasharray: `${g - d}px ${g}px`,
+      strokeDashoffset: `-${d / 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;
+  }), I = s(() => {
+    const t = 50 - n.value / 2, g = Math.PI * 2 * t, d = e.gapDegree || (e.progressType === "circle" ? 0 : 75), y = e.successPercent !== void 0 && e.successPercent !== null ? [e.successPercent, e.percent] : [e.percent];
+    return y.map((P, k) => {
+      const $ = y.length === 2 && k === 0;
       return {
-        stroke: c.value && !S ? `url(#gradient-${b.value})` : null,
+        stroke: r.value && !$ ? `url(#gradient-${S.value})` : null,
         strokePathStyle: {
-          stroke: c.value ? null : S ? "default" : e.strokeColor,
+          stroke: r.value ? null : $ ? "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`
+          strokeDasharray: `${(P || 0) / 100 * (g - d)}px ${g}px`,
+          strokeDashoffset: `-${d / 2}px`
         }
       };
     }).reverse();
-  }), w = s(() => ({
+  }), b = 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`
+    background: r.value ? null : e.strokeColor,
+    "background-image": r.value ? c.value : null,
+    height: `${n.value}px`
   }));
   return {
     progressClass: l,
     inCircleProgressBarStyle: i,
-    inCircleProgressBarClass: m,
+    inCircleProgressBarClass: v,
     pathString: x,
-    trailPathStyle: I,
-    progressCirclePaths: j,
-    gradientId: b,
-    inlineProgressBackgroundStyle: w
+    trailPathStyle: w,
+    progressCirclePaths: I,
+    gradientId: S,
+    inlineProgressBackgroundStyle: b
   };
 }
-function ye(e) {
+function Y(e) {
   return { isCircleStyle: s(() => e.progressType === "circle" || e.progressType === "dashboard") };
 }
-function ve(e) {
-  const o = s(() => {
-    const d = {
+function A(e) {
+  const a = s(() => {
+    const u = {
       "f-progress-text-icon": !0,
       "f-icon": !0
-    }, c = `f-icon-${e.progressStatus}`;
-    return d[c] = !0, d;
-  }), u = s(() => {
-    const d = {
+    }, r = `f-icon-${e.progressStatus}`;
+    return u[r] = !0, u;
+  }), f = s(() => {
+    const u = {
       "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");
+    }, r = e.progressStatus === "success" ? "f-icon-checkmark" : "f-icon-x";
+    return u[r] = !0, u;
+  }), h = s(() => e.progressStatus === "error" || e.progressStatus === "success");
   return {
-    inlineProgrssStatusClass: o,
-    circleProgrssStatusClass: u,
-    shouldShowStatus: g
+    inlineProgrssStatusClass: a,
+    circleProgrssStatusClass: f,
+    shouldShowStatus: h
   };
 }
-function he(e) {
-  const o = s(() => ({
+function E(e) {
+  const a = 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 };
+  })), f = s(() => e.successPercent || e.successPercent === 0);
+  return { inlineProgressSuccessBackgroundStyle: a, shouldShowSuccessInlineProgressBackground: f };
 }
-const T = /* @__PURE__ */ N({
+const V = /* @__PURE__ */ N({
   name: "FProgress",
-  props: L,
+  props: z,
   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), {
+    const a = C(e.progressType), f = C(e.showInfo), h = C(e.percent), u = C(e.strokeLinecap), r = F(e), {
+      isGradient: c,
+      circleGradient: n
+    } = r, l = K(e), {
       strokeWidth: i
     } = l, {
-      formatPercentageText: m
-    } = fe(e), C = ye(e), {
-      isCircleStyle: b
-    } = C, {
+      formatPercentageText: v
+    } = M(e), p = Y(e), {
+      isCircleStyle: S
+    } = p, {
       progressClass: x,
-      inCircleProgressBarStyle: I,
-      inCircleProgressBarClass: j,
-      pathString: w,
-      trailPathStyle: r,
-      progressCirclePaths: y,
-      gradientId: v,
-      inlineProgressBackgroundStyle: h
-    } = pe(e, C, c, l), {
+      inCircleProgressBarStyle: w,
+      inCircleProgressBarClass: I,
+      pathString: b,
+      trailPathStyle: t,
+      progressCirclePaths: g,
+      gradientId: d,
+      inlineProgressBackgroundStyle: y
+    } = X(e, p, r, l), {
       inlineProgrssStatusClass: P,
       circleProgrssStatusClass: k,
-      shouldShowStatus: S
-    } = ve(e), {
-      inlineProgressSuccessBackgroundStyle: B,
-      shouldShowSuccessInlineProgressBackground: G
-    } = he(e);
-    F(() => e.percent, ($) => {
-      g.value = $ || 0;
+      shouldShowStatus: $
+    } = A(e), {
+      inlineProgressSuccessBackgroundStyle: T,
+      shouldShowSuccessInlineProgressBackground: j
+    } = E(e);
+    W(() => e.percent, (m) => {
+      h.value = m || 0;
     });
-    function O() {
-      return u.value && t("span", {
+    function B() {
+      return f.value && o("span", {
         class: "f-progress-text"
-      }, [S.value ? t("span", {
-        class: b.value ? k.value : P.value
-      }, null) : m.value]);
+      }, [$.value ? o("span", {
+        class: S.value ? k.value : P.value
+      }, null) : v.value]);
     }
-    function W() {
-      return t(K, null, [t("div", {
+    function G() {
+      return o(D, null, [o("div", {
         class: "f-progress-outer"
-      }, [t("div", {
+      }, [o("div", {
         class: "f-progress-inner"
-      }, [t("div", {
+      }, [o("div", {
         class: "f-progress-bg",
-        style: h.value
-      }, null), G.value && t("div", {
+        style: y.value
+      }, null), j.value && o("div", {
         class: "f-progress-success-bg",
-        style: B.value
-      }, null)])]), O()]);
+        style: T.value
+      }, null)])]), B()]);
     }
-    function D() {
-      return t("div", {
-        class: j.value,
-        style: I.value
-      }, [t("svg", {
+    function O() {
+      return o("div", {
+        class: I.value,
+        style: w.value
+      }, [o("svg", {
         class: "f-progress-circle",
         viewBox: "0 0 100 100"
-      }, [f.value && t("defs", null, [t("linearGradient", {
-        id: "gradient-" + v.value,
+      }, [c.value && o("defs", null, [o("linearGradient", {
+        id: "gradient-" + d.value,
         x1: "100%",
         y1: "0%",
         x2: "0%",
         y2: "0%"
-      }, [a.value.map(($) => t("stop", {
-        offset: $.offset,
-        "stop-color": $.color
-      }, null))])]), t("path", {
+      }, [n.value.map((m) => o("stop", {
+        offset: m.offset,
+        "stop-color": m.color
+      }, null))])]), o("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", {
+        d: b.value,
+        style: t.value
+      }, null), g.value.map((m) => o("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()]);
+        d: b.value,
+        "stroke-linecap": u.value,
+        stroke: m.stroke,
+        "stroke-width": h.value ? i.value : 0,
+        style: m.strokePathStyle
+      }, null))]), B()]);
     }
-    return () => t("div", {
+    return () => o("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()]);
+    }, [a.value === "line" && G(), S.value && O()]);
   }
-});
-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);
+}), J = L(V);
 export {
-  T as Progress,
-  $e as default,
-  L as progressProps,
-  M as propsResolver
+  V as Progress,
+  J as default,
+  z as progressProps
 };