@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 G, computed as W, watch as le, createVNode as j, withModifiers as L, createTextVNode as E, inject as re } from "vue";
import { isPlainObject as U, cloneDeep as K } from "lodash-es";
import { withInstall as ne } from "../common/index.esm.js";
const x = {}, I = {};
function J(a) {
  const { properties: e, title: t, ignore: l } = a, n = l && Array.isArray(l), m = Object.keys(e).reduce((p, b) => ((!n || !l.find((R) => R === b)) && (p[b] = e[b].type === "object" && e[b].properties ? J(e[b]) : K(e[b].default)), p), {});
  if (t && (!n || !l.find((p) => p === "id"))) {
    const p = t.toLowerCase().replace(/-/g, "_");
    m.id = `${p}_${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, p) => (m[p] = e[p].type === "object" && e[p].properties ? J(e[p]) : K(e[p].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 = J(e);
  return Object.keys(t).reduce((l, n) => (Object.prototype.hasOwnProperty.call(a, n) && (l[n] && U(l[n]) && U(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 p = m(n, a[n], a);
        Object.assign(l, p);
      }
    } 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, d) {
    if (typeof c == "number")
      return d[r].length === c;
    if (typeof c == "object") {
      const S = Object.keys(c)[0], M = c[S];
      if (S === "not")
        return Number(d[r].length) !== Number(M);
      if (S === "moreThan")
        return Number(d[r].length) >= Number(M);
      if (S === "lessThan")
        return Number(d[r].length) <= Number(M);
    }
    return !1;
  }
  function t(r, u, c, d) {
    return d[r] && d[r].propertyValue && String(d[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((d) => {
      if (d === "length")
        return { target: c, operator: "length", param: null, value: u[d] };
      const S = d, M = u[d];
      return { target: c, operator: "getProperty", param: S, value: M };
    }) : [];
  }
  function m(r) {
    return Object.keys(r).reduce((c, d) => {
      const S = n(d, r[d]);
      return c.push(...S), c;
    }, []);
  }
  function p(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 b(r, u) {
    return m(r).reduce((S, M) => S && p(M, u), !0);
  }
  function R(r, u) {
    const c = Object.keys(r), d = c.includes("allOf"), S = c.includes("anyOf"), M = d || S, O = (M ? r[M ? d ? "allOf" : "anyOf" : "allOf"] : [r]).map((v) => b(v, u));
    return d ? !O.includes(!1) : O.includes(!0);
  }
  return { parseValueSchema: R };
}
const ce = {}, fe = {};
ie();
function de(a, e, t = /* @__PURE__ */ new Map(), l = (p, b, R, r) => b, n = {}, m = (p) => p) {
  return x[e.title] = e, I[e.title] = l, ce[e.title] = n, fe[e.title] = m, (p = {}, b = !0) => {
    if (!b)
      return ae(p, t);
    const R = ue(p, e, t), r = Object.keys(a).reduce((u, c) => (u[c] = a[c].default, u), {});
    return Object.assign(r, R);
  };
}
function pe(a, e) {
  return { customClass: e.class, customStyle: e.style };
}
const ve = /* @__PURE__ */ new Map([
  ["appearance", pe]
]);
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 = ["很不满意", "不满意", "一般", "满意", "非常满意"], Q = {
  /** 星星大小 */
  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 = de(Q, ke, ve, me, Ve), q = /* @__PURE__ */ Z({
  name: "FRate",
  props: Q,
  emits: ["selectedValue", "update:modelValue"],
  setup(a, e) {
    const t = o(a.size), l = o(a.enableHalf), n = o(a.enableClear), m = o(a.disabled), p = o(a.pointSystem), b = o(a.lightColor), R = o(a.darkColor), r = o(a.iconClass), u = o(a.numOfStar), c = o(a.toolTipDisabled), d = o(a.toolTipContents), S = o(a.enableScore), M = o(a.enableSatisfaction);
    let g;
    const k = o(0), O = o(0), D = o(0), v = o(a.modelValue);
    let N = 1, w, A, s;
    const h = 4;
    G(() => {
    });
    function y() {
      const f = u.value;
      s = [];
      for (let P = 1; P <= f; P++)
        s.push({
          id: P
        });
    }
    function T() {
      let f;
      l.value ? f = Math.ceil(v.value / N) : f = v.value, O.value = (g * v.value + Math.floor(v.value) * h) / N, w = d.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 = p.value / u.value), v.value && T();
    }
    B();
    function H(f) {
      return f.className.indexOf("f-icon") !== -1;
    }
    function _() {
      return k.value === O.value && n.value && O.value !== 0 ? (O.value = 0, v.value = 0, A = null, k.value = 0, D.value = 0, e.emit("selectedValue", v.value), e.emit("update:modelValue", v.value), !0) : !1;
    }
    function z(f, P, i) {
      if (f.movementX || f.movementY) {
        if (m.value)
          return;
        M.value && (w = d.value[P - 1]), f.offsetX < g / 2 && l.value === !0 ? (k.value = g * P - g / 2 + h * (P - 1), D.value = N * P - N / 2) : (k.value = g * P + h * (P - 1), D.value = N * P);
      }
      if (i === !0) {
        if (_())
          return;
        v.value = D.value, O.value = k.value, A = w, e.emit("update:modelValue", v.value), e.emit("selectedValue", v.value);
      }
    }
    function F(f, P) {
      var i;
      if (H(f.target) && f.target) {
        const V = parseInt((i = f.target) == null ? void 0 : i.id);
        z(f, V, P);
      }
    }
    const C = W(() => D.value ? D.value + "分" : v.value + "分"), X = W(() => ({
      width: (k.value || O.value) + "px"
    }));
    function $() {
      k.value = 0;
    }
    return le(() => a.modelValue, (f) => {
      v.value = f, T();
    }), () => j("div", {
      class: "farris-star-rating",
      onMouseover: L((f) => F(f, !1), ["prevent"]),
      onMousemove: L((f) => F(f, !1), ["prevent"]),
      onMouseleave: L((f) => $(), ["prevent"]),
      onClick: L((f) => F(f, !0), ["prevent"])
    }, [j("div", {
      class: "star-light-area",
      style: X.value
    }, [s.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: b.value
      }
    }, null))]), j("div", {
      class: ["star-dark-area", {
        small: t.value === "small"
      }, {
        middle: t.value === "middle"
      }, {
        large: t.value === "large"
      }]
    }, [s.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: R.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"
      }]
    }, [S.value && j("span", null, [E(" "), C.value, E(" ")]), M.value && (A || w) && j("span", null, [E(" "), w || A])])]);
  }
});
function Re(a, e, t) {
  var A;
  const l = "", n = "", m = o();
  function p() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function b() {
    return !1;
  }
  function R() {
    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 h = o(s == null ? void 0 : s.value.parent), y = u(h);
    return y || null;
  }
  function c(s = e) {
    var B;
    const { componentInstance: h, designerItemElementRef: y } = s;
    if (!h || !h.value)
      return null;
    const { getCustomButtons: T } = h.value;
    return h.value.canMove || T && ((B = T()) != null && B.length) ? y : c(s.parent);
  }
  function d(s) {
    return !!t;
  }
  function S() {
    return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
  }
  function M() {
  }
  function g(s, h) {
    var y;
    !s || !h || (y = e == null ? void 0 : e.setupContext) == null || y.emit("dragEnd");
  }
  function k(s, h) {
    const { componentType: y } = s;
    let T = ee(y, s, h);
    const B = y.toLowerCase().replace(/-/g, "_");
    return T && !T.id && T.type === y && (T.id = `${B}_${Math.random().toString().slice(2, 6)}`), T;
  }
  function O(s) {
  }
  function D(...s) {
  }
  function v() {
    e != null && e.schema.contents && e.schema.contents.map((s) => {
      let h = s.id;
      s.type === "component-ref" && (h = s.component);
      const y = a.value.querySelectorAll(`#${h}-design-item`);
      y != null && y.length && Array.from(y).map((T) => {
        var B;
        (B = T == null ? void 0 : T.componentInstance) != null && B.value.onRemoveComponent && T.componentInstance.value.onRemoveComponent();
      });
    });
  }
  function N() {
  }
  function w(s) {
  }
  return m.value = {
    canMove: p(),
    canSelectParent: b(),
    canDelete: R(),
    canNested: !r(),
    contents: e == null ? void 0 : e.schema.contents,
    elementRef: a,
    parent: (A = e == null ? void 0 : e.parent) == null ? void 0 : A.componentInstance,
    schema: e == null ? void 0 : e.schema,
    styles: l,
    designerClass: n,
    canAccepts: d,
    getBelongedComponentInstance: u,
    getDraggableDesignItemElement: c,
    getDraggingDisplayText: S,
    getPropConfig: D,
    getDragScopeElement: M,
    onAcceptMovedChildElement: g,
    onChildElementMovedOut: O,
    addNewChildComponentSchema: k,
    triggerBelongedComponentToMoveWhenMoved: o(!1),
    triggerBelongedComponentToDeleteWhenDeleted: o(!1),
    onRemoveComponent: v,
    getCustomButtons: N,
    onPropertyChanged: w
  }, m;
}
const Ae = /* @__PURE__ */ Z({
  name: "FRateDesign",
  props: Q,
  emits: ["selectedValue"],
  setup(a, e) {
    const t = o(a.size), l = o(a.enableHalf), n = o(a.enableClear), m = o(a.disabled), p = o(a.pointSystem), b = o(a.lightColor), R = o(a.darkColor), r = o(a.iconClass), u = o(a.numOfStar), c = o(a.toolTipDisabled), d = o(a.toolTipContents), S = o(a.enableScore), M = o(a.enableSatisfaction);
    let g;
    const k = o(1);
    let O = 0;
    const D = o(0), v = o(0);
    let N = 1, w, A, s;
    const h = 4, y = o(), T = re("design-item-context"), B = Re(y, T);
    G(() => {
      y.value.componentInstance = B;
    }), e.expose(B.value), G(() => {
    });
    function H() {
      const i = u.value;
      s = [];
      for (let V = 1; V <= i; V++)
        s.push({
          id: V
        });
    }
    function _() {
      let i;
      l.value ? i = Math.ceil(v.value / N) : i = v.value, O = (g * v.value + Math.floor(v.value) * h) / N, w = d.value[i - 1];
    }
    function z() {
      switch (t.value) {
        case "small":
          g = 14;
          break;
        case "middle":
          g = 16;
          break;
        case "large":
          g = 18;
          break;
        case "extraLarge":
          g = 24;
          break;
      }
      H(), u.value && (N = p.value / u.value), v.value && _();
    }
    z();
    function F(i) {
      return i.className.indexOf("f-icon") !== -1;
    }
    function C() {
      return k.value === O && n && O !== 0 ? (O = 0, v.value = 0, A = null, k.value = 0, D.value = 0, e.emit("selectedValue", v.value), !0) : !1;
    }
    function X(i, V, Y) {
      if (i.movementX || i.movementY) {
        if (m.value)
          return;
        M.value && (w = d.value[V - 1]), i.offsetX < g / 2 && l.value === !0 ? (k.value = g * V - g / 2 + h * (V - 1), D.value = N * V - N / 2) : (k.value = g * V + h * (V - 1), D.value = N * V);
      }
      if (Y === !0) {
        if (C())
          return;
        v.value = D.value, O = k.value, A = w, e.emit("selectedValue", v.value);
      }
    }
    function $(i, V) {
      if (F(i.target) && i.target) {
        const Y = parseInt(i.target.id);
        X(i, Y, V);
      }
    }
    const f = W(() => D.value ? D.value + "分" : v.value + "分"), P = W(() => ({
      width: (k.value || O) + "px"
    }));
    return () => j("div", {
      class: "farris-star-rating",
      ref: y,
      onMouseover: L((i) => $(i, !1), ["prevent"]),
      onMousemove: L((i) => $(i, !1), ["prevent"]),
      onMouseout: L((i) => $(i, !1), ["prevent"]),
      onClick: L((i) => $(i, !0), ["prevent"])
    }, [j("div", {
      class: "star-light-area",
      style: P.value
    }, [s.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: b.value
      }
    }, null))]), j("div", {
      class: ["star-dark-area", {
        small: t.value === "small"
      }, {
        middle: t.value === "middle"
      }, {
        large: t.value === "large"
      }]
    }, [s.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: R.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"
      }]
    }, [S.value && j("span", null, [E(" "), f.value, E(" ")]), M.value && (A || w) && j("span", null, [E(" "), w || A])])]);
  }
});
q.register = (a, e, t, l) => {
  a.rate = q, e.rate = te;
};
q.registerDesigner = (a, e, t) => {
  a.rate = Ae, e.rate = te;
};
const Ee = ne(q);
export {
  q as FRate,
  Ee as default,
  te as propsResolver,
  Q as rateProps
};