kate522
39bafb65c4
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.
2 lines
5.8 KiB
JavaScript
2 lines
5.8 KiB
JavaScript
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",disabled:!x.value,onClick:q},{default:p(()=>[...s[5]||(s[5]=[I(" 确认插入 ",-1)])]),_:1},8,["disabled"])]),h.value.length?(n(),i("div",le,[(n(!0),i(b,null,z(h.value,(a,O)=>(n(),i("div",{key:O,class:V(["aksrt-icon-picker__item",{"is-active":e.modelValue===`customsvg-${a}`}]),title:"customsvg","data-icon":`customsvg-${a}`,innerHTML:c(w)(a)},null,10,ce))),128))])):T("",!0)])):(n(),i("div",ue,[(n(!0),i(b,null,z($.value,a=>(n(),i("div",{key:a,class:V(["aksrt-icon-picker__item",{"is-active":e.modelValue===c(B)(S.value,a)}]),title:a,"data-icon":c(B)(S.value,a)},[S.value.type==="fa"?(n(),i("i",{key:0,class:V([m.value,"fa-"+a])},null,2)):(n(),i("span",{key:1,class:"aksrt-icon-picker__preview-svg",innerHTML:c(F)(`zibsvg-${a}`)},null,8,ve))],10,de))),128)),$.value.length===0?(n(),i("div",pe," 未找到匹配图标 ")):T("",!0)]))])]),_:1},8,["show"])])}}},ye=H(fe,[["__scopeId","data-v-ff0f92a9"]]);export{ye as F,te as I};
|