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

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as A, ref as u, computed as d, watch as N, createVNode as l, inject as V, onMounted as E } from "vue";
import { resolveAppearance as G, createPropsResolver as H } from "../dynamic-resolver/index.esm.js";
import { getCustomClass as q } from "../common/index.esm.js";
import { useDesignerComponent as J } from "../designer-canvas/index.esm.js";
const K = /* @__PURE__ */ new Map([
  ["appearance", G]
]);
function Q(c, p, o) {
  return p;
}
const U = "https://json-schema.org/draft/2020-12/schema", W = "https://farris-design.gitee.io/step.schema.json", X = "step", Y = "A Farris Component", Z = "object", _ = {
  id: {
    description: "The unique identifier for step",
    type: "string"
  },
  type: {
    description: "The type string of step",
    type: "string",
    default: "step"
  },
  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
  }
}, I = [
  "id",
  "type"
], x = {
  $schema: U,
  $id: W,
  title: X,
  description: Y,
  type: Z,
  properties: _,
  required: I
}, ee = "step", te = "A Farris Component", se = "object", ne = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  }
}, ce = {
  title: ee,
  description: te,
  type: se,
  categories: ne
}, L = {
  /** 步骤条方向  */
  direction: { type: String, default: "horizontal" },
  /** 是否平铺 */
  fill: { type: Boolean, default: !1 },
  /** 竖向步骤条，fill 时需要传递的高度 */
  height: { type: Number, default: 0 },
  /** 是否支持点击 */
  clickable: { type: Boolean, default: !0 },
  /** 步骤条的具体参数 */
  steps: {
    type: Array,
    default: [
      {
        id: "1",
        title: "审批中（示例）",
        description: "正在审批"
      },
      {
        id: "2",
        title: "复核中（示例）",
        description: "等待复核"
      }
    ]
  },
  /** 当前active步骤的索引 */
  activeIndex: { type: Number, default: 0 },
  /** 步骤条点击后事件 */
  onClick: { type: Function, default: () => {
  } }
}, D = H(L, x, K, Q, ce), g = /* @__PURE__ */ A({
  name: "FStep",
  props: L,
  emits: ["click"],
  setup(c, p) {
    const o = u(c.direction), f = u(c.fill), C = u(c.height), v = u(c.steps), i = u(c.activeIndex), k = d(() => ({
      "f-progress-step-list": o.value === "horizontal",
      "f-progress-step-list-block": o.value === "vertical",
      "f-progress-step-horizontal-fill": o.value === "horizontal" && f.value,
      "f-progress-step-vertical-fill": o.value === "vertical" && f.value
    })), S = d(() => ({
      height: o.value === "vertical" ? `${C.value}px` : ""
    }));
    function b(t, e) {
      const a = {
        step: !0,
        active: e === i.value,
        clickable: c.clickable,
        current: e === i.value,
        finish: e < i.value
      };
      return t.status && (a[t.status] = !0), q(a, t.class || "");
    }
    function $(t, e) {
      if (!c.clickable)
        return;
      const a = {
        step: t,
        stepIndex: e
      };
      p.emit("click", a);
    }
    function y(t, e) {
      const a = {
        "f-progressstep-row": !0,
        "step-active": e === i.value,
        "step-current": e === i.value,
        "step-finish": e < i.value
      };
      return t.status && (a["step-" + t.status] = !0), a;
    }
    function m(t, e) {
      return q({
        "step-icon": !0,
        "step-success": e,
        "f-icon": e,
        "f-icon-check": e
      }, t.icon || "");
    }
    function R(t, e) {
      const a = [];
      return t.icon ? a.push(l("span", {
        class: m(t, !1)
      }, null)) : e >= i.value ? a.push(l("span", {
        class: "step-icon"
      }, [e + 1])) : a.push(l("span", {
        class: m(t, !0)
      }, null)), a;
    }
    function T(t, e) {
      return {
        "step-name": !0,
        "step-name-success": e < i.value
      };
    }
    function M(t, e) {
      return l("div", {
        class: "f-progress-step-title"
      }, [l("p", {
        class: T(t, e)
      }, [t.title])]);
    }
    function w(t, e) {
      return {
        "f-progress-step-line": !0,
        "f-progress-step-line-success": e === i.value
      };
    }
    function j(t, e) {
      return e !== v.value.length - 1;
    }
    const z = d(() => ({
      triangle: !0,
      "": o.value === "vertical"
    }));
    function O() {
      return v.value.map((t, e) => l("li", {
        class: b(t, e),
        onClick: (a) => $(t, e)
      }, [l("div", {
        class: y(t, e)
      }, [l("div", {
        class: "f-progress-step-content"
      }, [R(t, e), M(t, e)]), j(t, e) && l("div", {
        class: w(t, e)
      }, [l("span", {
        class: z.value
      }, null)])])]));
    }
    return N(() => c.activeIndex, () => {
      c.activeIndex > -1 && c.activeIndex <= v.value.length && (i.value = c.activeIndex, O());
    }), () => l("div", {
      class: "f-progress-step"
    }, [l("ul", {
      class: k.value,
      style: S.value
    }, [O()])]);
  }
}), le = /* @__PURE__ */ A({
  name: "FStepDesign",
  props: L,
  emits: [],
  setup(c, p) {
    const o = u(c.direction), f = u(c.fill), C = u(c.height), v = u(c.steps), i = u(0), k = u(c.clickable), S = u(0), b = u(), $ = V("design-item-context"), y = J(b, $);
    E(() => {
      b.value.componentInstance = y;
    }), p.expose(y.value);
    const m = d(() => ({
      "f-progress-step-list": o.value === "horizontal",
      "f-progress-step-list-block": o.value === "vertical",
      "f-progress-step-horizontal-fill": o.value === "horizontal" && f.value,
      "f-progress-step-vertical-fill": o.value === "vertical" && f.value
    })), R = d(() => ({
      height: o.value === "vertical" ? `${C.value}px` : ""
    }));
    function T(s, n) {
      const r = {
        step: !0,
        active: n === i.value,
        clickable: k.value,
        "click-disable": s.disable,
        current: n === i.value
      };
      return n < i.value && (r.finish = !0), s.status && (r[s.status] = !0), s.hasOwnProperty("class") && s.class.split(" ").reduce((h, F) => (h[F] = !0, h), r), r;
    }
    function M(s, n) {
    }
    function w(s, n) {
      const r = {
        "f-progressstep-row": !0,
        "step-active": n === i.value,
        "step-current": n === i.value
      };
      return n < i.value && (r["step-finish"] = !0), s.status && (r["step-" + s.status] = !0), r;
    }
    function j(s, n) {
      const r = {
        "step-icon": !0,
        "step-success": n,
        "k-icon": n,
        "k-i-check": n
      };
      return s.hasOwnProperty("icon") && s.class.split(" ").reduce((h, F) => (h[F] = !0, h), r), r;
    }
    function z(s, n) {
      const r = [];
      return s.icon ? r.push(l("span", {
        class: j(s, !1)
      }, null)) : n >= i.value || n === S.value ? r.push(l("span", {
        class: "step-icon"
      }, [n + 1])) : r.push(l("span", {
        class: j(s, !0)
      }, null)), r;
    }
    function O(s, n) {
      return {
        "step-name": !0,
        "step-name-success": n < i.value
      };
    }
    function t(s, n) {
      return l("div", {
        class: "f-progress-step-title"
      }, [l("p", {
        class: O(s, n)
      }, [s.title])]);
    }
    function e(s, n) {
      return {
        "f-progress-step-line": !0,
        "f-progress-step-line-success": n === i.value
      };
    }
    function a(s, n) {
      return n !== v.value.length - 1;
    }
    const P = d(() => ({
      triangle: !0,
      "": o.value === "vertical"
    }));
    function B() {
      return v.value.map((s, n) => l("li", {
        class: T(s, n),
        onClick: (r) => void 0
      }, [l("div", {
        class: w(s, n)
      }, [l("div", {
        class: "f-progress-step-content"
      }, [z(s, n), t(s, n)]), a(s, n) && l("div", {
        class: e(s, n)
      }, [l("span", {
        class: P.value
      }, null)])])]));
    }
    return () => l("div", {
      ref: b,
      class: "f-progress-step"
    }, [l("ul", {
      class: m.value,
      style: R.value
    }, [B()])]);
  }
});
g.install = (c) => {
  c.component(g.name, g);
};
g.register = (c, p, o, f) => {
  c.step = g, p.step = D;
};
g.registerDesigner = (c, p, o) => {
  c.step = le, p.step = D;
};
export {
  g as FStep,
  g as default,
  D as propsResolver,
  L as stepProps
};