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

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as Z, ref as o, onMounted as C, computed as _, watch as le, createVNode as j, withModifiers as L, createTextVNode as W, inject as re } from "vue";
import { isPlainObject as Q, cloneDeep as K } from "lodash-es";
import { withInstall as ne } from "../common/index.esm.js";
const x = {}, I = {};
function G(a) {
  const { properties: e, title: t, ignore: l } = a, n = l && Array.isArray(l), m = Object.keys(e).reduce((d, S) => ((!n || !l.find((A) => A === S)) && (d[S] = e[S].type === "object" && e[S].properties ? G(e[S]) : K(e[S].default)), d), {});
  if (t && (!n || !l.find((d) => d === "id"))) {
    const d = t.toLowerCase().replace(/-/g, "_");
    m.id = `${d}_${Math.random().toString().slice(2, 6)}`;
  }
  return m;
}
function oe(a) {
  const { properties: e, title: t, required: l } = a;
  if (l && Array.isArray(l)) {
    const n = l.reduce((m, d) => (m[d] = e[d].type === "object" && e[d].properties ? G(e[d]) : K(e[d].default), m), {});
    if (t && l.find((m) => m === "id")) {
      const m = t.toLowerCase().replace(/-/g, "_");
      n.id = `${m}_${Math.random().toString().slice(2, 6)}`;
    }
    return n;
  }
  return {
    type: t
  };
}
function ee(a, e = {}, t) {
  const l = x[a];
  if (l) {
    let n = oe(l);
    const m = I[a];
    return n = m ? m({ getSchemaByType: ee }, n, e, t) : n, n;
  }
  return null;
}
function se(a, e) {
  const t = G(e);
  return Object.keys(t).reduce((l, n) => (Object.prototype.hasOwnProperty.call(a, n) && (l[n] && Q(l[n]) && Q(a[n] || !a[n]) ? Object.assign(l[n], a[n] || {}) : l[n] = a[n]), l), t), t;
}
function ae(a, e) {
  return Object.keys(a).filter((l) => a[l] != null).reduce((l, n) => {
    if (e.has(n)) {
      const m = e.get(n);
      if (typeof m == "string")
        l[m] = a[n];
      else {
        const d = m(n, a[n], a);
        Object.assign(l, d);
      }
    } else
      l[n] = a[n];
    return l;
  }, {});
}
function ue(a, e, t = /* @__PURE__ */ new Map()) {
  const l = se(a, e);
  return ae(l, t);
}
function ie(a = {}) {
  function e(r, u, c, p) {
    if (typeof c == "number")
      return p[r].length === c;
    if (typeof c == "object") {
      const M = Object.keys(c)[0], O = c[M];
      if (M === "not")
        return Number(p[r].length) !== Number(O);
      if (M === "moreThan")
        return Number(p[r].length) >= Number(O);
      if (M === "lessThan")
        return Number(p[r].length) <= Number(O);
    }
    return !1;
  }
  function t(r, u, c, p) {
    return p[r] && p[r].propertyValue && String(p[r].propertyValue.value) === String(c);
  }
  const l = /* @__PURE__ */ new Map([
    ["length", e],
    ["getProperty", t]
  ]);
  Object.keys(a).reduce((r, u) => (r.set(u, a[u]), r), l);
  function n(r, u) {
    const c = r;
    return typeof u == "number" ? [{ target: c, operator: "length", param: null, value: Number(u) }] : typeof u == "boolean" ? [{ target: c, operator: "getProperty", param: r, value: !!u }] : typeof u == "object" ? Object.keys(u).map((p) => {
      if (p === "length")
        return { target: c, operator: "length", param: null, value: u[p] };
      const M = p, O = u[p];
      return { target: c, operator: "getProperty", param: M, value: O };
    }) : [];
  }
  function m(r) {
    return Object.keys(r).reduce((c, p) => {
      const M = n(p, r[p]);
      return c.push(...M), c;
    }, []);
  }
  function d(r, u) {
    if (l.has(r.operator)) {
      const c = l.get(r.operator);
      return c && c(r.target, r.param, r.value, u) || !1;
    }
    return !1;
  }
  function S(r, u) {
    return m(r).reduce((M, O) => M && d(O, u), !0);
  }
  function A(r, u) {
    const c = Object.keys(r), p = c.includes("allOf"), M = c.includes("anyOf"), O = p || M, T = (O ? r[O ? p ? "allOf" : "anyOf" : "allOf"] : [r]).map((v) => S(v, u));
    return p ? !T.includes(!1) : T.includes(!0);
  }
  return { parseValueSchema: A };
}
const ce = {}, fe = {};
ie();
function pe(a, e, t = /* @__PURE__ */ new Map(), l = (d, S, A, r) => S, n = {}, m = (d) => d) {
  return x[e.title] = e, I[e.title] = l, ce[e.title] = n, fe[e.title] = m, (d = {}, S = !0) => {
    if (!S)
      return ae(d, t);
    const A = ue(d, e, t), r = Object.keys(a).reduce((u, c) => (u[c] = a[c].default, u), {});
    return Object.assign(r, A);
  };
}
function de(a, e) {
  return { customClass: e.class, customStyle: e.style };
}
const ve = /* @__PURE__ */ new Map([
  ["appearance", de]
]);
function me(a, e, t) {
  return e;
}
const ge = "https://json-schema.org/draft/2020-12/schema", ye = "https://farris-design.gitee.io/rate.schema.json", he = "rate", be = "A Farris Component", Se = "object", Me = {
  id: {
    description: "The unique identifier for rate",
    type: "string"
  },
  type: {
    description: "The type string of rate",
    type: "string",
    default: "rate"
  },
  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
  }
}, Oe = [
  "id",
  "type"
], Te = [
  "id",
  "appearance",
  "binding"
], ke = {
  $schema: ge,
  $id: ye,
  title: he,
  description: be,
  type: Se,
  properties: Me,
  required: Oe,
  ignore: Te
}, De = "rate", je = "A Farris Component", Ne = "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: []
        }
      }
    }
  }
}, Ve = {
  title: De,
  description: je,
  type: Ne,
  categories: Pe
}, we = ["很不满意", "不满意", "一般", "满意", "非常满意"], J = {
  /** 星星大小 */
  size: { type: String, default: "large" },
  /** 启用半颗星模式 */
  enableHalf: { type: Boolean, default: !1 },
  /** 启用再次点击后清除 */
  enableClear: { type: Boolean, default: !1 },
  /** 只读 */
  disabled: { type: Boolean, default: !1 },
  /** 分制 */
  pointSystem: { type: Number, default: 5 },
  /** 星星亮色 */
  lightColor: { type: String, default: "" },
  /** 星星暗色（底色） */
  darkColor: { type: String, default: "" },
  /** 图案样式 */
  iconClass: { type: String, default: "f-icon-star" },
  /** 星星个数 */
  numOfStar: { type: Number, default: 5 },
  /** 禁用单个星星的文字提示 */
  toolTipDisabled: { type: Boolean, default: !0 },
  /** 默认的满意度文案 */
  toolTipContents: { type: Array, default: we },
  /** 启用评分 */
  enableScore: { type: Boolean, default: !0 },
  /** 启用满意度 */
  enableSatisfaction: { type: Boolean, default: !1 },
  /**
   * 绑定值
   */
  value: { type: Number, default: 0 },
  modelValue: { type: Number, default: 0 }
}, te = pe(J, ke, ve, me, Ve), z = /* @__PURE__ */ Z({
  name: "FRate",
  props: J,
  emits: ["selectedValue", "update:modelValue"],
  setup(a, e) {
    const t = o(a.size), l = o(a.enableHalf), n = o(a.enableClear), m = o(a.disabled), d = o(a.pointSystem), S = o(a.lightColor), A = o(a.darkColor), r = o(a.iconClass), u = o(a.numOfStar), c = o(a.toolTipDisabled), p = o(a.toolTipContents), M = o(a.enableScore), O = o(a.enableSatisfaction);
    let g;
    const k = o(0), T = o(0), D = o(0), v = o(a.modelValue);
    let N = 1, R, E, B;
    const s = 4;
    C(() => {
    });
    function y() {
      const f = u.value;
      B = [];
      for (let V = 1; V <= f; V++)
        B.push({
          id: V
        });
    }
    function h() {
      let f;
      l.value ? f = Math.ceil(v.value / N) : f = v.value, T.value = (g * v.value + Math.floor(v.value) * s) / N, R = p.value[f - 1];
    }
    function b() {
      switch (t.value) {
        case "small":
          g = 14;
          break;
        case "middle":
          g = 16;
          break;
        case "large":
          g = 18;
          break;
        case "extraLarge":
          g = 24;
          break;
      }
      y(), u.value && (N = d.value / u.value), v.value && h();
    }
    b();
    function P(f) {
      return f.className.indexOf("f-icon") !== -1;
    }
    function $() {
      return k.value === T.value && n.value && T.value !== 0 ? (T.value = 0, v.value = 0, E = null, k.value = 0, D.value = 0, e.emit("selectedValue", v.value), e.emit("update:modelValue", v.value), !0) : !1;
    }
    function H(f, V, i) {
      if (f.movementX || f.movementY) {
        if (m.value)
          return;
        O.value && (R = p.value[V - 1]), f.offsetX < g / 2 && l.value === !0 ? (k.value = g * V - g / 2 + s * (V - 1), D.value = N * V - N / 2) : (k.value = g * V + s * (V - 1), D.value = N * V);
      }
      if (i === !0) {
        if ($())
          return;
        v.value = D.value, T.value = k.value, E = R, e.emit("update:modelValue", v.value), e.emit("selectedValue", v.value);
      }
    }
    function q(f, V) {
      var i;
      if (P(f.target) && f.target) {
        const w = parseInt((i = f.target) == null ? void 0 : i.id);
        H(f, w, V);
      }
    }
    const X = _(() => D.value ? D.value + "分" : v.value + "分"), Y = _(() => ({
      width: (k.value || T.value) + "px"
    }));
    function F() {
      k.value = 0;
    }
    return le(() => a.modelValue, (f) => {
      v.value = f, h();
    }), () => j("div", {
      class: "farris-star-rating",
      onMouseover: L((f) => q(f, !1), ["prevent"]),
      onMousemove: L((f) => q(f, !1), ["prevent"]),
      onMouseleave: L((f) => F(), ["prevent"]),
      onClick: L((f) => q(f, !0), ["prevent"])
    }, [j("div", {
      class: "star-light-area",
      style: Y.value
    }, [B.map((f) => j("span", {
      class: ["f-icon default-light-color ", r.value, {
        "f-star-sm": t.value === "small"
      }, {
        "f-star-md": t.value === "middle"
      }, {
        "f-star-lg": t.value === "large"
      }, {
        "f-star-exlarge": t.value === "extraLarge"
      }, {
        disabled: c.value
      }],
      id: f.id,
      style: {
        color: S.value
      }
    }, null))]), j("div", {
      class: ["star-dark-area", {
        small: t.value === "small"
      }, {
        middle: t.value === "middle"
      }, {
        large: t.value === "large"
      }]
    }, [B.map((f) => j("span", {
      class: ["f-icon default-dark-color", r.value, {
        "f-star-sm": t.value === "small"
      }, {
        "f-star-md": t.value === "middle"
      }, {
        "f-star-lg": t.value === "large"
      }, {
        "f-star-exlarge": t.value === "extraLarge"
      }],
      id: f.id,
      style: {
        color: A.value
      }
    }, null))]), j("div", {
      class: ["f-utils-fill", {
        "font-small": t.value === "small"
      }, {
        "font-middle": t.value === "middle"
      }, {
        "font-large": t.value === "large"
      }, {
        "font-exlarge": t.value === "extraLarge"
      }]
    }, [M.value && j("span", null, [W(" "), X.value, W(" ")]), O.value && (E || R) && j("span", null, [W(" "), R || E])])]);
  }
});
function Re(a, e, t) {
  var B;
  const l = "", n = "", m = o();
  function d() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function S() {
    return !1;
  }
  function A() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function r() {
    return (e == null ? void 0 : e.schema.componentType) === "frame";
  }
  function u(s) {
    if (!s || !s.value)
      return null;
    if (s.value.schema && s.value.schema.type === "component")
      return s.value;
    const y = o(s == null ? void 0 : s.value.parent), h = u(y);
    return h || null;
  }
  function c(s = e) {
    var P;
    const { componentInstance: y, designerItemElementRef: h } = s;
    if (!y || !y.value)
      return null;
    const { getCustomButtons: b } = y.value;
    return y.value.canMove || b && ((P = b()) != null && P.length) ? h : c(s.parent);
  }
  function p(s) {
    return !!t;
  }
  function M() {
    return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
  }
  function O() {
  }
  function g(s, y) {
    var h;
    !s || !y || (h = e == null ? void 0 : e.setupContext) == null || h.emit("dragEnd");
  }
  function k(s, y) {
    const { componentType: h } = s;
    let b = ee(h, s, y);
    const P = h.toLowerCase().replace(/-/g, "_");
    return b && !b.id && b.type === h && (b.id = `${P}_${Math.random().toString().slice(2, 6)}`), b;
  }
  function T(s) {
  }
  function D(...s) {
  }
  function v(s) {
    if (!s)
      return;
    const y = e == null ? void 0 : e.schema, { formSchemaUtils: h } = s;
    if (y && h.getExpressions().length) {
      const b = h.getExpressions().findIndex((P) => P.target === y.id);
      b > -1 && h.getExpressions().splice(b, 1);
    }
  }
  function N(s) {
    v(s), e != null && e.schema.contents && e.schema.contents.map((y) => {
      let h = y.id;
      y.type === "component-ref" && (h = y.component);
      const b = a.value.querySelectorAll(`#${h}-design-item`);
      b != null && b.length && Array.from(b).map((P) => {
        var $;
        ($ = P == null ? void 0 : P.componentInstance) != null && $.value.onRemoveComponent && P.componentInstance.value.onRemoveComponent(s);
      });
    });
  }
  function R() {
  }
  function E(s) {
  }
  return m.value = {
    canMove: d(),
    canSelectParent: S(),
    canDelete: A(),
    canNested: !r(),
    contents: e == null ? void 0 : e.schema.contents,
    elementRef: a,
    parent: (B = e == null ? void 0 : e.parent) == null ? void 0 : B.componentInstance,
    schema: e == null ? void 0 : e.schema,
    styles: l,
    designerClass: n,
    canAccepts: p,
    getBelongedComponentInstance: u,
    getDraggableDesignItemElement: c,
    getDraggingDisplayText: M,
    getPropConfig: D,
    getDragScopeElement: O,
    onAcceptMovedChildElement: g,
    onChildElementMovedOut: T,
    addNewChildComponentSchema: k,
    triggerBelongedComponentToMoveWhenMoved: o(!1),
    triggerBelongedComponentToDeleteWhenDeleted: o(!1),
    onRemoveComponent: N,
    getCustomButtons: R,
    onPropertyChanged: E
  }, m;
}
const Ae = /* @__PURE__ */ Z({
  name: "FRateDesign",
  props: J,
  emits: ["selectedValue"],
  setup(a, e) {
    const t = o(a.size), l = o(a.enableHalf), n = o(a.enableClear), m = o(a.disabled), d = o(a.pointSystem), S = o(a.lightColor), A = o(a.darkColor), r = o(a.iconClass), u = o(a.numOfStar), c = o(a.toolTipDisabled), p = o(a.toolTipContents), M = o(a.enableScore), O = o(a.enableSatisfaction);
    let g;
    const k = o(1);
    let T = 0;
    const D = o(0), v = o(0);
    let N = 1, R, E, B;
    const s = 4, y = o(), h = re("design-item-context"), b = Re(y, h);
    C(() => {
      y.value.componentInstance = b;
    }), e.expose(b.value), C(() => {
    });
    function P() {
      const i = u.value;
      B = [];
      for (let w = 1; w <= i; w++)
        B.push({
          id: w
        });
    }
    function $() {
      let i;
      l.value ? i = Math.ceil(v.value / N) : i = v.value, T = (g * v.value + Math.floor(v.value) * s) / N, R = p.value[i - 1];
    }
    function H() {
      switch (t.value) {
        case "small":
          g = 14;
          break;
        case "middle":
          g = 16;
          break;
        case "large":
          g = 18;
          break;
        case "extraLarge":
          g = 24;
          break;
      }
      P(), u.value && (N = d.value / u.value), v.value && $();
    }
    H();
    function q(i) {
      return i.className.indexOf("f-icon") !== -1;
    }
    function X() {
      return k.value === T && n && T !== 0 ? (T = 0, v.value = 0, E = null, k.value = 0, D.value = 0, e.emit("selectedValue", v.value), !0) : !1;
    }
    function Y(i, w, U) {
      if (i.movementX || i.movementY) {
        if (m.value)
          return;
        O.value && (R = p.value[w - 1]), i.offsetX < g / 2 && l.value === !0 ? (k.value = g * w - g / 2 + s * (w - 1), D.value = N * w - N / 2) : (k.value = g * w + s * (w - 1), D.value = N * w);
      }
      if (U === !0) {
        if (X())
          return;
        v.value = D.value, T = k.value, E = R, e.emit("selectedValue", v.value);
      }
    }
    function F(i, w) {
      if (q(i.target) && i.target) {
        const U = parseInt(i.target.id);
        Y(i, U, w);
      }
    }
    const f = _(() => D.value ? D.value + "分" : v.value + "分"), V = _(() => ({
      width: (k.value || T) + "px"
    }));
    return () => j("div", {
      class: "farris-star-rating",
      ref: y,
      onMouseover: L((i) => F(i, !1), ["prevent"]),
      onMousemove: L((i) => F(i, !1), ["prevent"]),
      onMouseout: L((i) => F(i, !1), ["prevent"]),
      onClick: L((i) => F(i, !0), ["prevent"])
    }, [j("div", {
      class: "star-light-area",
      style: V.value
    }, [B.map((i) => j("span", {
      class: ["f-icon default-light-color ", r.value, {
        "f-star-sm": t.value === "small"
      }, {
        "f-star-md": t.value === "middle"
      }, {
        "f-star-lg": t.value === "large"
      }, {
        "f-star-exlarge": t.value === "extraLarge"
      }, {
        disabled: c.value
      }],
      id: i.id,
      style: {
        color: S.value
      }
    }, null))]), j("div", {
      class: ["star-dark-area", {
        small: t.value === "small"
      }, {
        middle: t.value === "middle"
      }, {
        large: t.value === "large"
      }]
    }, [B.map((i) => j("span", {
      class: ["f-icon default-dark-color", r.value, {
        "f-star-sm": t.value === "small"
      }, {
        "f-star-md": t.value === "middle"
      }, {
        "f-star-lg": t.value === "large"
      }, {
        "f-star-exlarge": t.value === "extraLarge"
      }],
      id: i.id,
      style: {
        color: A.value
      }
    }, null))]), j("div", {
      class: ["f-utils-fill", {
        "font-small": t.value === "small"
      }, {
        "font-middle": t.value === "middle"
      }, {
        "font-large": t.value === "large"
      }, {
        "font-exlarge": t.value === "extraLarge"
      }]
    }, [M.value && j("span", null, [W(" "), f.value, W(" ")]), O.value && (E || R) && j("span", null, [W(" "), R || E])])]);
  }
});
z.register = (a, e, t, l) => {
  a.rate = z, e.rate = te;
};
z.registerDesigner = (a, e, t) => {
  a.rate = Ae, e.rate = te;
};
const $e = ne(z);
export {
  z as FRate,
  $e as default,
  te as propsResolver,
  J as rateProps
};