fix(icons): render FA glyphs in the SPA picker grid and harden item clicks
The server catalog ships bare glyph names, but the SPA grid preview composed "fas home" instead of "fas fa-home" — every FA icon rendered blank (the old curated lists carried the fa- prefix, so the regression appeared with the catalog switch). Item clicks move from per-element @click to a delegated panel handler reading data-icon (immunity to DOM-replacing extensions/userscripts, matching the PHP picker's pattern), and selecting now closes the popover so the choice is visible in the field immediately.
This commit is contained in:
1 parent
27d8a9ea71
commit
39bafb65c4
12 files changed
+33
-20
No files matched your search
@@ -0,0 +1 @@
|
||||
import{_ as M}from"./FaIcon.NZ6TDkNu.js";import{_ as H}from"./index.js";import{N as c,W as n,X as i,L as V,a5 as T,c as L,o as Z,a1 as k,a4 as v,a3 as p,Y as y,F as b,R as z,a2 as A,f as I,Z as D,r as f}from"./vendor-vue.BxZIRU0_.js";import{a as G}from"./shared-api.DnsQ5cxS.js";function w(e){const o=String(e||"").trim();if(!o)return"";let u;try{u=new DOMParser().parseFromString(o,"image/svg+xml")}catch{return""}if(u.querySelector("parsererror"))return"";const r=u.querySelector("svg");if(!r||r.querySelector("script, foreignObject, animate"))return"";["class","id","style","t","version","p-id"].forEach(l=>r.removeAttribute(l)),Array.from(r.attributes).forEach(l=>{l.name.indexOf("data-")===0&&r.removeAttribute(l.name)});const d=new XMLSerializer().serializeToString(r);return/<path|<use|<g\b|<circle|<rect|<polygon|<ellipse|<line/i.test(d)?d:""}function R(e){return/^fa[\s-]/.test(String(e||"").trim())}function X(e){return String(e||"").trim().startsWith("zibsvg-")}function j(e){return String(e||"").trim().startsWith("customsvg-")}function Y(e){return String(e||"").trim().slice(7).replace(/[^a-zA-Z0-9_-]/g,"")}function F(e){const o=Y(e);return o?`<svg class="icon" aria-hidden="true"><use xlink:href="#icon-${o}"></use></svg>`:""}function B(e,o){return e.type==="fa"?`fa ${e.id} fa-${o}`:e.type==="svg"?`zibsvg-${o}`:String(o||"")}const J=["innerHTML"],Q=["innerHTML"],ee={__name:"IconValue",props:{value:{type:String,default:""}},setup(e){const o=e,u=L(()=>{const r=String(o.value||"").trim();return r.startsWith("fa-")?`fa fas ${r}`:r});return(r,d)=>c(R)(e.value)?(n(),i("i",{key:0,class:V(u.value),"aria-hidden":"true"},null,2)):c(X)(e.value)?(n(),i("span",{key:1,class:"aksrt-icon-value__svg",innerHTML:c(F)(e.value)},null,8,J)):c(j)(e.value)?(n(),i("span",{key:2,class:"aksrt-icon-value__svg",innerHTML:c(w)(e.value.slice(10))},null,8,Q)):T("",!0)}},te=H(ee,[["__scopeId","data-v-127de8f8"]]),ae={class:"aksrt-fa-icon-picker"},se={class:"aksrt-icon-picker__search"},ne={class:"aksrt-icon-picker__tabs"},ie={key:0,class:"aksrt-icon-picker__custom"},oe={class:"aksrt-icon-picker__custom-actions"},re=["innerHTML"],le={key:0,class:"aksrt-icon-picker__grid aksrt-icon-picker__grid--session","data-aksrt-icon-grid":"custom"},ce=["data-icon","innerHTML"],ue={key:1,class:"aksrt-icon-picker__grid","data-aksrt-icon-grid":"catalog"},de=["title","data-icon"],ve=["innerHTML"],pe={key:0,class:"aksrt-icon-picker__empty"},fe={__name:"FaIconPicker",props:{modelValue:{type:String,default:""},placeholder:{type:String,default:"选择图标"}},emits:["update:modelValue"],setup(e,{emit:o}){const u=o,d=f([{id:"fas",title:"Solid",type:"fa",icons:[]},{id:"far",title:"Regular",type:"fa",icons:[]},{id:"fab",title:"Brands",type:"fa",icons:[]},{id:"zibsvg",title:"内置 SVG",type:"svg",icons:[]},{id:"custom",title:"自定义",type:"custom",icons:[]}]),l=f(""),m=f("fas"),_=f(""),h=f([]),C=f(!1),S=L(()=>d.value.find(t=>t.id===m.value)||d.value[0]),$=L(()=>{const t=S.value;if(!t||t.type==="custom")return[];const s=l.value.toLowerCase().replace(/\s+/g,"");return s?t.icons.filter(g=>g.includes(s)):t.icons}),x=L(()=>w(_.value));function N(t){u("update:modelValue",t),C.value=!1}function P(t){const s=t.target.closest("[data-icon]");s&&N(s.dataset.icon)}function q(){const t=w(_.value);t&&(h.value.includes(t)||h.value.push(t),u("update:modelValue",`customsvg-${t}`),_.value="")}return Z(async()=>{try{const t=await G.getIconCatalog();t!=null&&t.success&&Array.isArray(t.groups)&&t.groups.length&&(d.value=t.groups)}catch{}}),(t,s)=>{const g=k("n-input"),U=k("n-radio-button"),W=k("n-radio-group"),E=k("n-button"),K=k("n-popover");return n(),i("div",ae,[v(K,{show:C.value,"onUpdate:show":s[4]||(s[4]=a=>C.value=a),trigger:"click",placement:"bottom-start",width:460,style:{padding:0}},{trigger:p(()=>[v(g,{value:e.modelValue,placeholder:e.placeholder,readonly:"",clearable:"",onClear:s[0]||(s[0]=a=>t.$emit("update:modelValue",""))},{prefix:p(()=>[e.modelValue?(n(),A(te,{key:0,value:e.modelValue},null,8,["value"])):(n(),i(b,{key:1},[],64))]),suffix:p(()=>[v(M,{icon:"fa fas fa-chevron-down",size:12})]),_:1},8,["value","placeholder"])]),default:p(()=>[y("div",{class:"aksrt-icon-picker__panel",onClick:P},[y("div",se,[v(g,{value:l.value,"onUpdate:value":s[1]||(s[1]=a=>l.value=a),placeholder:"搜索图标...",size:"small",clearable:""},{prefix:p(()=>[v(M,{icon:"fa fas fa-search",size:12})]),_:1},8,["value"])]),y("div",ne,[v(W,{value:m.value,"onUpdate:value":s[2]||(s[2]=a=>m.value=a),size:"small"},{default:p(()=>[(n(!0),i(b,null,z(d.value,a=>(n(),A(U,{key:a.id,value:a.id},{default:p(()=>[I(D(a.title),1)]),_:2},1032,["value"]))),128))]),_:1},8,["value"])]),m.value==="custom"?(n(),i("div",ie,[v(g,{value:_.value,"onUpdate:value":s[3]||(s[3]=a=>_.value=a),type:"textarea",placeholder:'<svg viewBox="0 0 1024 1024"><path d="…"></path></svg>',rows:4},null,8,["value"]),y("div",oe,[y("span",{class:"aksrt-icon-picker__custom-preview",innerHTML:x.value},null,8,re),v(E,{size:"small",type:"primary"Line truncated
|
||||
Reference in new issue
Block a user