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

Farris Vue, a Farris Design based Vue3 component library.

import J, { rateProps as K } from "../../components/rate/index.esm.js";
import { withInstall as Q } from "../../components/common/index.esm.js";
import { defineComponent as U, ref as l, inject as Z, onMounted as B, computed as D, createVNode as i, withModifiers as y, createTextVNode as T } from "vue";
import { useDesignerComponent as _ } from "../../components/designer-canvas/index.esm.js";
import { resolveAppearance as ee, createPropsResolver as te } from "../../components/dynamic-resolver/index.esm.js";
const ae = ["很不满意", "不满意", "一般", "满意", "非常满意"], le = {
  /** 星星大小 */
  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: ae },
  /** 启用评分 */
  enableScore: { type: Boolean, default: !0 },
  /** 启用满意度 */
  enableSatisfaction: { type: Boolean, default: !1 },
  /**
   * 绑定值
   */
  modelValue: { type: Number, default: 0 }
}, b = /* @__PURE__ */ U({
  name: "FRateDesign",
  props: le,
  emits: ["selectedValue"],
  setup(a, n) {
    const t = l(a.size), h = l(a.enableHalf), N = l(a.enableClear), O = l(a.disabled), w = l(a.pointSystem), A = l(a.lightColor), F = l(a.darkColor), k = l(a.iconClass), S = l(a.numOfStar), V = l(a.toolTipDisabled), j = l(a.toolTipContents), q = l(a.enableScore), R = l(a.enableSatisfaction);
    let s;
    const u = l(1);
    let c = 0;
    const d = l(0), o = l(0);
    let f = 1, p, v, m;
    const C = 4, x = l(), L = Z("design-item-context"), $ = _(x, L);
    B(() => {
      x.value.componentInstance = $;
    }), n.expose($.value), B(() => {
    });
    function P() {
      const e = S.value;
      m = [];
      for (let r = 1; r <= e; r++)
        m.push({
          id: r
        });
    }
    function z() {
      let e;
      h.value ? e = Math.ceil(o.value / f) : e = o.value, c = (s * o.value + Math.floor(o.value) * C) / f, p = j.value[e - 1];
    }
    function H() {
      switch (t.value) {
        case "small":
          s = 14;
          break;
        case "middle":
          s = 16;
          break;
        case "large":
          s = 18;
          break;
        case "extraLarge":
          s = 24;
          break;
      }
      P(), S.value && (f = w.value / S.value), o.value && z();
    }
    H();
    function W(e) {
      return e.className.indexOf("f-icon") !== -1;
    }
    function X() {
      return u.value === c && N && c !== 0 ? (c = 0, o.value = 0, v = null, u.value = 0, d.value = 0, n.emit("selectedValue", o.value), !0) : !1;
    }
    function E(e, r, M) {
      if (e.movementX || e.movementY) {
        if (O.value)
          return;
        R.value && (p = j.value[r - 1]), e.offsetX < s / 2 && h.value === !0 ? (u.value = s * r - s / 2 + C * (r - 1), d.value = f * r - f / 2) : (u.value = s * r + C * (r - 1), d.value = f * r);
      }
      if (M === !0) {
        if (X())
          return;
        o.value = d.value, c = u.value, v = p, n.emit("selectedValue", o.value);
      }
    }
    function g(e, r) {
      if (W(e.target) && e.target) {
        const M = parseInt(e.target.id);
        E(e, M, r);
      }
    }
    const Y = D(() => d.value ? d.value + "分" : o.value + "分"), G = D(() => ({
      width: (u.value || c) + "px"
    }));
    return () => i("div", {
      class: "farris-star-rating",
      ref: x,
      onMouseover: y((e) => g(e, !1), ["prevent"]),
      onMousemove: y((e) => g(e, !1), ["prevent"]),
      onMouseout: y((e) => g(e, !1), ["prevent"]),
      onClick: y((e) => g(e, !0), ["prevent"])
    }, [i("div", {
      class: "star-light-area",
      style: G.value
    }, [m.map((e) => i("span", {
      class: ["f-icon default-light-color ", k.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: V.value
      }],
      id: e.id,
      style: {
        color: A.value
      }
    }, null))]), i("div", {
      class: ["star-dark-area", {
        small: t.value === "small"
      }, {
        middle: t.value === "middle"
      }, {
        large: t.value === "large"
      }]
    }, [m.map((e) => i("span", {
      class: ["f-icon default-dark-color", k.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: e.id,
      style: {
        color: F.value
      }
    }, null))]), i("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"
      }]
    }, [q.value && i("span", null, [T(" "), Y.value, T(" ")]), R.value && (v || p) && i("span", null, [T(" "), p || v])])]);
  }
}), re = /* @__PURE__ */ new Map([
  ["appearance", ee]
]);
function oe(a, n, t) {
  return n;
}
const ne = "https://json-schema.org/draft/2020-12/schema", se = "https://farris-design.gitee.io/rate.schema.json", ie = "rate", ue = "A Farris Component", ce = "object", de = {
  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
  }
}, fe = [
  "id",
  "type"
], pe = [
  "id",
  "appearance",
  "binding"
], ve = {
  $schema: ne,
  $id: se,
  title: ie,
  description: ue,
  type: ce,
  properties: de,
  required: fe,
  ignore: pe
}, me = "rate", ge = "A Farris Component", ye = "object", be = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  }
}, he = {
  title: me,
  description: ge,
  type: ye,
  categories: be
}, I = te(K, ve, re, oe, he);
b.register = (a, n, t, h) => {
  a.rate = J, n.rate = I;
};
b.registerDesigner = (a, n, t) => {
  a.rate = b, n.rate = I;
};
const ke = Q(b);
export {
  b as FRateDesign,
  ke as default,
  I as propsResolver
};