t-fighting-design/lib/rate/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),l=require("./index3.js"),m=require("../../svg-icon/index.js"),v=require("../../_components/svg/index12.js"),p=require("../../text/index.js"),_={class:"f-rate",role:"slider"},k={class:"f-rate__list"},C=["onMouseover","onClick"],h=e.defineComponent({name:"FRate"}),V=e.defineComponent({...h,props:l.Props,emits:l.Emits,setup(s,{emit:a}){const t=s,r=e.ref(t.modelValue),u=o=>{t.readonly||(r.value=o)},c=()=>{t.readonly||(r.value=t.modelValue)},i=o=>{t.readonly||(r.value=o,a("update:modelValue",o),t.change&&t.change(o))};e.watch(()=>t.modelValue,()=>{r.value=t.modelValue});const d=e.computed(()=>t.textArr[e.unref(r)-1]);return(o,g)=>(e.openBlock(),e.createElementBlock("div",_,[e.createElementVNode("div",k,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.max,(y,n)=>(e.openBlock(),e.createElementBlock("div",{key:n,class:e.normalizeClass(["f-rate__star",{"f-rate__star-readonly":o.readonly}]),onMouseout:c,onMouseover:f=>u(n+1),onClick:f=>i(n+1)},[e.createVNode(e.unref(m.FSvgIcon),{size:o.size,icon:o.icon||e.unref(v.default),color:r.value>n?o.effectColor:o.invalidColor},null,8,["size","icon","color"])],42,C))),128))]),o.textShow?(e.openBlock(),e.createBlock(e.unref(p.FText),{key:0,size:o.textSize,color:o.textColor},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(d)),1)]),_:1},8,["size","color"])):e.createCommentVNode("",!0)]))}});exports.default=V;