@farris/ui-vue 1.7.3 → 1.7.5

package/components/progress/index.esm.js

@@ -1,6 +1,114 @@
-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 = {
+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" },
@@ -30,242 +138,339 @@ const z = {
   /**
    * 格式化进度信息
    */
-  format: { type: Function, default: (e, a) => `${e}%` }
-};
-function F(e) {
-  function a(c) {
-    return +c.replace("%", "");
+  format: { type: Function, default: (e, o) => `${e}%` }
+}, M = V(L, oe, Q, U, ue);
+function ge(e) {
+  function o(f) {
+    return +f.replace("%", "");
   }
-  function f(c) {
-    let n = [];
-    return Object.keys(c).forEach((l) => {
-      const i = c[l], v = a(l);
-      isNaN(v) || n.push({
-        key: v,
+  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
       });
-    }), n = n.sort((l, i) => l.key - i.key), n;
+    }), a = a.sort((l, i) => l.key - i.key), a;
   }
-  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;
+  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 v = f(i).map(({ key: p, value: S }) => `${S} ${p}%`).join(", ");
-      return `linear-gradient(${l}, ${v})`;
+      const m = u(i).map(({ key: C, value: b }) => `${b} ${C}%`).join(", ");
+      return `linear-gradient(${l}, ${m})`;
     }
-    return `linear-gradient(${l}, ${c}, ${n})`;
-  }), r = s(() => f(e.strokeColor).map(({ key: c, value: n }) => ({ offset: `${c}%`, color: n })));
+    return `linear-gradient(${l}, ${f}, ${a})`;
+  }), c = s(() => u(e.strokeColor).map(({ key: f, value: a }) => ({ offset: `${f}%`, color: a })));
   return {
-    isGradient: h,
-    linearGradient: u,
-    circleGradient: r
+    isGradient: g,
+    linearGradient: d,
+    circleGradient: c
   };
 }
-function K(e) {
+function de(e) {
   return { strokeWidth: s(() => e.strokeWidth || (e.progressType === "line" && e.size !== "small" ? 8 : 6)) };
 }
-function M(e) {
+function fe(e) {
   return { formatPercentageText: s(() => e.format(e.percent, e.successPercent)) };
 }
-function X(e, a, f, h) {
-  const { isCircleStyle: u } = a, { isGradient: r, linearGradient: c } = f, { strokeWidth: n } = h, l = s(() => {
-    const t = {
+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": u.value
-    }, g = `f-progress-status-${e.progressStatus}`;
-    return t[g] = !0, t;
+      "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": r.value
-  })), v = s(() => ({
+    "f-progress-circle-gradient": c.value
+  })), m = s(() => ({
     "f-progress-inner": !0,
-    "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) {
+    "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":
-        d = -t, y = 0, P = t * 2, k = 0;
+        v = -r, h = 0, P = r * 2, k = 0;
         break;
       case "right":
-        d = t, y = 0, P = t * -2, k = 0;
+        v = r, h = 0, P = r * -2, k = 0;
         break;
       case "bottom":
-        y = t, k = t * 2;
+        h = r, k = r * 2;
         break;
     }
-    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 `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: `${g - d}px ${g}px`,
-      strokeDashoffset: `-${d / 2}px`,
+      strokeDasharray: `${y - v}px ${y}px`,
+      strokeDashoffset: `-${v / 2}px`,
       transition: "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
     };
-  }), 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;
+  }), 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: r.value && !$ ? `url(#gradient-${S.value})` : null,
+        stroke: c.value && !S ? `url(#gradient-${b.value})` : null,
         strokePathStyle: {
-          stroke: r.value ? null : $ ? "default" : e.strokeColor,
+          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 * (g - d)}px ${g}px`,
-          strokeDashoffset: `-${d / 2}px`
+          strokeDasharray: `${(P || 0) / 100 * (y - v)}px ${y}px`,
+          strokeDashoffset: `-${v / 2}px`
         }
       };
     }).reverse();
-  }), b = s(() => ({
+  }), w = s(() => ({
     width: `${e.percent}%`,
     "border-radius": e.strokeLinecap === "round" ? "100px" : "0",
-    background: r.value ? null : e.strokeColor,
-    "background-image": r.value ? c.value : null,
-    height: `${n.value}px`
+    background: c.value ? null : e.strokeColor,
+    "background-image": c.value ? f.value : null,
+    height: `${a.value}px`
   }));
   return {
     progressClass: l,
     inCircleProgressBarStyle: i,
-    inCircleProgressBarClass: v,
+    inCircleProgressBarClass: m,
     pathString: x,
-    trailPathStyle: w,
-    progressCirclePaths: I,
-    gradientId: S,
-    inlineProgressBackgroundStyle: b
+    trailPathStyle: I,
+    progressCirclePaths: j,
+    gradientId: b,
+    inlineProgressBackgroundStyle: w
   };
 }
-function Y(e) {
+function ye(e) {
   return { isCircleStyle: s(() => e.progressType === "circle" || e.progressType === "dashboard") };
 }
-function A(e) {
-  const a = s(() => {
-    const u = {
+function ve(e) {
+  const o = s(() => {
+    const d = {
       "f-progress-text-icon": !0,
       "f-icon": !0
-    }, r = `f-icon-${e.progressStatus}`;
-    return u[r] = !0, u;
-  }), f = s(() => {
-    const u = {
+    }, c = `f-icon-${e.progressStatus}`;
+    return d[c] = !0, d;
+  }), u = s(() => {
+    const d = {
       "f-progress-text-icon": !0,
       "f-icon": !0
-    }, r = e.progressStatus === "success" ? "f-icon-checkmark" : "f-icon-x";
-    return u[r] = !0, u;
-  }), h = s(() => e.progressStatus === "error" || e.progressStatus === "success");
+    }, 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: a,
-    circleProgrssStatusClass: f,
-    shouldShowStatus: h
+    inlineProgrssStatusClass: o,
+    circleProgrssStatusClass: u,
+    shouldShowStatus: g
   };
 }
-function E(e) {
-  const a = s(() => ({
+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
-  })), f = s(() => e.successPercent || e.successPercent === 0);
-  return { inlineProgressSuccessBackgroundStyle: a, shouldShowSuccessInlineProgressBackground: f };
+  })), u = s(() => e.successPercent || e.successPercent === 0);
+  return { inlineProgressSuccessBackgroundStyle: o, shouldShowSuccessInlineProgressBackground: u };
 }
-const V = /* @__PURE__ */ N({
+const T = /* @__PURE__ */ N({
   name: "FProgress",
-  props: z,
+  props: L,
   emits: [],
   setup(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), {
+    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: v
-    } = M(e), p = Y(e), {
-      isCircleStyle: S
-    } = p, {
+      formatPercentageText: m
+    } = fe(e), C = ye(e), {
+      isCircleStyle: b
+    } = C, {
       progressClass: x,
-      inCircleProgressBarStyle: w,
-      inCircleProgressBarClass: I,
-      pathString: b,
-      trailPathStyle: t,
-      progressCirclePaths: g,
-      gradientId: d,
-      inlineProgressBackgroundStyle: y
-    } = X(e, p, r, l), {
+      inCircleProgressBarStyle: I,
+      inCircleProgressBarClass: j,
+      pathString: w,
+      trailPathStyle: r,
+      progressCirclePaths: y,
+      gradientId: v,
+      inlineProgressBackgroundStyle: h
+    } = pe(e, C, c, l), {
       inlineProgrssStatusClass: P,
       circleProgrssStatusClass: k,
-      shouldShowStatus: $
-    } = A(e), {
-      inlineProgressSuccessBackgroundStyle: T,
-      shouldShowSuccessInlineProgressBackground: j
-    } = E(e);
-    W(() => e.percent, (m) => {
-      h.value = m || 0;
+      shouldShowStatus: S
+    } = ve(e), {
+      inlineProgressSuccessBackgroundStyle: B,
+      shouldShowSuccessInlineProgressBackground: G
+    } = he(e);
+    F(() => e.percent, ($) => {
+      g.value = $ || 0;
     });
-    function B() {
-      return f.value && o("span", {
+    function O() {
+      return u.value && t("span", {
         class: "f-progress-text"
-      }, [$.value ? o("span", {
-        class: S.value ? k.value : P.value
-      }, null) : v.value]);
+      }, [S.value ? t("span", {
+        class: b.value ? k.value : P.value
+      }, null) : m.value]);
     }
-    function G() {
-      return o(D, null, [o("div", {
+    function W() {
+      return t(K, null, [t("div", {
         class: "f-progress-outer"
-      }, [o("div", {
+      }, [t("div", {
         class: "f-progress-inner"
-      }, [o("div", {
+      }, [t("div", {
         class: "f-progress-bg",
-        style: y.value
-      }, null), j.value && o("div", {
+        style: h.value
+      }, null), G.value && t("div", {
         class: "f-progress-success-bg",
-        style: T.value
-      }, null)])]), B()]);
+        style: B.value
+      }, null)])]), O()]);
     }
-    function O() {
-      return o("div", {
-        class: I.value,
-        style: w.value
-      }, [o("svg", {
+    function D() {
+      return t("div", {
+        class: j.value,
+        style: I.value
+      }, [t("svg", {
         class: "f-progress-circle",
         viewBox: "0 0 100 100"
-      }, [c.value && o("defs", null, [o("linearGradient", {
-        id: "gradient-" + d.value,
+      }, [f.value && t("defs", null, [t("linearGradient", {
+        id: "gradient-" + v.value,
         x1: "100%",
         y1: "0%",
         x2: "0%",
         y2: "0%"
-      }, [n.value.map((m) => o("stop", {
-        offset: m.offset,
-        "stop-color": m.color
-      }, null))])]), o("path", {
+      }, [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: b.value,
-        style: t.value
-      }, null), g.value.map((m) => o("path", {
+        d: w.value,
+        style: r.value
+      }, null), y.value.map(($) => t("path", {
         class: "f-progress-circle-path",
         "fill-opacity": "0",
-        d: b.value,
-        "stroke-linecap": u.value,
-        stroke: m.stroke,
-        "stroke-width": h.value ? i.value : 0,
-        style: m.strokePathStyle
-      }, null))]), B()]);
+        d: w.value,
+        "stroke-linecap": d.value,
+        stroke: $.stroke,
+        "stroke-width": g.value ? i.value : 0,
+        style: $.strokePathStyle
+      }, null))]), O()]);
     }
-    return () => o("div", {
+    return () => t("div", {
       class: x.value
-    }, [a.value === "line" && G(), S.value && O()]);
+    }, [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()]);
   }
-}), J = L(V);
+});
+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 {
-  V as Progress,
-  J as default,
-  z as progressProps
+  T as Progress,
+  $e as default,
+  L as progressProps,
+  M as propsResolver
 };