t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
62 lines (61 loc) • 2.01 kB
JavaScript
import { defineComponent as s, ref as v, watch as _, computed as C, unref as r, openBlock as a, createElementBlock as n, createElementVNode as V, Fragment as h, renderList as k, normalizeClass as y, createVNode as z, createBlock as g, withCtx as F, createTextVNode as S, toDisplayString as B, createCommentVNode as M } from "vue";
import { Props as N, Emits as w } from "./index3.js";
import { FSvgIcon as E } from "../../svg-icon/index.js";
import I from "../../_components/svg/index12.js";
import { FText as T } from "../../text/index.js";
const $ = {
class: "f-rate",
role: "slider"
}, A = { class: "f-rate__list" }, D = ["onMouseover", "onClick"], L = s({
name: "FRate"
}), J = /* @__PURE__ */ s({
...L,
props: N,
emits: w,
setup(c, { emit: u }) {
const o = c, t = v(o.modelValue), i = (e) => {
o.readonly || (t.value = e);
}, m = () => {
o.readonly || (t.value = o.modelValue);
}, d = (e) => {
o.readonly || (t.value = e, u("update:modelValue", e), o.change && o.change(e));
};
_(
() => o.modelValue,
() => {
t.value = o.modelValue;
}
);
const f = C(() => o.textArr[r(t) - 1]);
return (e, P) => (a(), n("div", $, [
V("div", A, [
(a(!0), n(h, null, k(e.max, (R, l) => (a(), n("div", {
key: l,
class: y(["f-rate__star", { "f-rate__star-readonly": e.readonly }]),
onMouseout: m,
onMouseover: (p) => i(l + 1),
onClick: (p) => d(l + 1)
}, [
z(r(E), {
size: e.size,
icon: e.icon || r(I),
color: t.value > l ? e.effectColor : e.invalidColor
}, null, 8, ["size", "icon", "color"])
], 42, D))), 128))
]),
e.textShow ? (a(), g(r(T), {
key: 0,
size: e.textSize,
color: e.textColor
}, {
default: F(() => [
S(B(r(f)), 1)
]),
_: 1
}, 8, ["size", "color"])) : M("", !0)
]));
}
});
export {
J as default
};