kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(icons): render FA glyphs in the SPA picker grid and harden item clicks

Browse Source 
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:
kate522
2026-09-06 15:48:52 +08:00
parent 27d8a9ea71
commit 39bafb65c4
12 changed files with 33 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/src/components/form/FaIconPicker.vue
+22 -9
View File
@@ -1,6 +1,6 @@
<template>
<div class="aksrt-fa-icon-picker">
<n-popover trigger="click" placement="bottom-start" :width="460" :style="{ padding: 0 }">
<n-popover v-model:show="popoverShow" trigger="click" placement="bottom-start" :width="460" :style="{ padding: 0 }">
<template #trigger>
<n-input
:value="modelValue"
@@ -19,7 +19,7 @@
</n-input>
</template>
<div class="aksrt-icon-picker__panel">
<div class="aksrt-icon-picker__panel" @click="onPanelClick">
<div class="aksrt-icon-picker__search">
<n-input v-model:value="search" placeholder="搜索图标..." size="small" clearable>
<template #prefix>
@@ -45,30 +45,34 @@
确认插入
</n-button>
</div>
<div v-if="sessionCustom.length" class="aksrt-icon-picker__grid aksrt-icon-picker__grid--session">
<div
v-if="sessionCustom.length"
class="aksrt-icon-picker__grid aksrt-icon-picker__grid--session"
data-aksrt-icon-grid="custom"
>
<div
v-for="(svg, i) in sessionCustom"
:key="i"
class="aksrt-icon-picker__item"
:class="{ 'is-active': modelValue === `customsvg-${svg}` }"
title="customsvg"
@click="$emit('update:modelValue', `customsvg-${svg}`)"
:data-icon="`customsvg-${svg}`"
v-html="cleanSvg(svg)"
></div>
</div>
</div>
<!-- Catalog tab -->
<div v-else class="aksrt-icon-picker__grid" ref="gridRef">
<div v-else class="aksrt-icon-picker__grid" data-aksrt-icon-grid="catalog">
<div
v-for="icon in filteredIcons"
:key="icon"
class="aksrt-icon-picker__item"
:class="{ 'is-active': modelValue === composeIconValue(activeGroup, icon) }"
:title="icon"
@click="selectIcon(icon)"
:data-icon="composeIconValue(activeGroup, icon)"
>
<i v-if="activeGroup.type === 'fa'" :class="[activeTab, icon]"></i>
<i v-if="activeGroup.type === 'fa'" :class="[activeTab, 'fa-' + icon]"></i>
<span
v-else
class="aksrt-icon-picker__preview-svg"
@@ -120,6 +124,7 @@ const search = ref('')
const activeTab = ref('fas')
const customCode = ref('')
const sessionCustom = ref([])
const popoverShow = ref(false)
const activeGroup = computed(() => tabs.value.find(t => t.id === activeTab.value) || tabs.value[0])
@@ -133,8 +138,16 @@ const filteredIcons = computed(() => {
const customPreview = computed(() => cleanSvg(customCode.value))
function selectIcon(icon) {
emit('update:modelValue', composeIconValue(activeGroup.value, icon))
function selectIcon(value) {
emit('update:modelValue', value)
popoverShow.value = false
}
// Delegated on the panel: survives any DOM replacement inside the grids and
// works for both the catalog and session grids.
function onPanelClick(event) {
const item = event.target.closest('[data-icon]')
if (item) selectIcon(item.dataset.icon)
}
function insertCustom() {