mirror of
https://github.com/elder-plinius/P4RS3LT0NGV3.git
synced 2026-07-12 07:26:33 +02:00
search/filter update for transforms, node version bump
This commit is contained in:
ph1r3754r73r
+61
-19
@@ -57,23 +57,56 @@
|
||||
</div>
|
||||
|
||||
<div class="transform-section">
|
||||
<div class="transform-category-legend">
|
||||
<div class="legend-title">Categories:</div>
|
||||
<div>
|
||||
<div
|
||||
v-for="category in legendCategories"
|
||||
:key="category"
|
||||
:class="'legend-item transform-category-' + category"
|
||||
:data-target="'category-' + category"
|
||||
<div class="transform-filter-bar">
|
||||
<div class="transform-search-wrap">
|
||||
<i class="fas fa-search transform-search-icon" aria-hidden="true"></i>
|
||||
<input
|
||||
type="search"
|
||||
v-model="transformSearchQuery"
|
||||
placeholder="Search transforms..."
|
||||
aria-label="Search transforms"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<button
|
||||
v-if="transformSearchActive() || transformCategoryFilter"
|
||||
type="button"
|
||||
class="transform-filter-clear"
|
||||
@click="clearTransformFilters"
|
||||
title="Clear filters"
|
||||
aria-label="Clear filters"
|
||||
>
|
||||
{{ category }}
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="transform-category-filters">
|
||||
<span class="transform-filter-label">Category</span>
|
||||
<div class="transform-category-chips" role="group" aria-label="Filter by category">
|
||||
<button
|
||||
type="button"
|
||||
class="category-chip category-chip-all"
|
||||
:class="{ 'active-filter': !transformCategoryFilter }"
|
||||
@click="transformCategoryFilter = ''"
|
||||
>
|
||||
All
|
||||
</button>
|
||||
<button
|
||||
v-for="category in legendCategories"
|
||||
:key="category"
|
||||
type="button"
|
||||
:class="'category-chip transform-category-' + category"
|
||||
:class="{ 'active-filter': transformCategoryFilter === category }"
|
||||
@click="toggleCategoryFilter(category)"
|
||||
>
|
||||
{{ formatCategoryLabel(category) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transform-categories">
|
||||
<!-- Favorites Section -->
|
||||
<div
|
||||
v-if="showFavorites && getFavoriteDisplayItems().length > 0"
|
||||
v-if="favoritesSectionVisible()"
|
||||
id="category-favorites"
|
||||
class="transform-category-section favorites-section"
|
||||
>
|
||||
@@ -81,7 +114,7 @@
|
||||
<i class="fas fa-star"></i> Favorites
|
||||
</h4>
|
||||
<div class="transform-buttons">
|
||||
<template v-for="item in getFavoriteDisplayItems()" :key="item.key">
|
||||
<template v-for="item in getFilteredFavoriteDisplayItems()" :key="item.key">
|
||||
<div v-if="item.type === 'transform'" class="transform-button-group">
|
||||
<button
|
||||
@click="applyTransform(item.transform, $event)"
|
||||
@@ -160,7 +193,7 @@
|
||||
|
||||
<!-- Last Used Section -->
|
||||
<div
|
||||
v-if="showLastUsed && getLastUsedDisplayItems().length > 0"
|
||||
v-if="lastUsedSectionVisible()"
|
||||
id="category-last-used"
|
||||
class="transform-category-section last-used-section"
|
||||
>
|
||||
@@ -168,7 +201,7 @@
|
||||
<i class="fas fa-clock"></i> Last Used
|
||||
</h4>
|
||||
<div class="transform-buttons">
|
||||
<template v-for="item in getLastUsedDisplayItems()" :key="item.key">
|
||||
<template v-for="item in getFilteredLastUsedDisplayItems()" :key="item.key">
|
||||
<div v-if="item.type === 'transform'" class="transform-button-group">
|
||||
<button
|
||||
@click="applyTransform(item.transform, $event)"
|
||||
@@ -246,7 +279,7 @@
|
||||
</div>
|
||||
|
||||
<!-- AI Translation — pinned after Favorites / Last Used, before transform categories -->
|
||||
<div id="category-translate" class="transform-category-section translate-inline-section">
|
||||
<div v-if="translateSectionVisible()" id="category-translate" class="transform-category-section translate-inline-section">
|
||||
<h4 class="category-title transform-category-translate">
|
||||
<i class="fas fa-language"></i> Translation (AI)
|
||||
<small class="translate-powered-by">TranslateGemma</small>
|
||||
@@ -267,6 +300,7 @@
|
||||
<div class="translate-lang-grid translate-lang-grid-inline">
|
||||
<div
|
||||
v-for="lang in translateMainLangs"
|
||||
v-if="translateLangVisible(lang.name)"
|
||||
:key="lang.code"
|
||||
class="translate-lang-card"
|
||||
>
|
||||
@@ -304,6 +338,7 @@
|
||||
<div class="translate-lang-grid translate-lang-grid-inline">
|
||||
<div
|
||||
v-for="lang in translateExoticLangs"
|
||||
v-if="translateLangVisible(lang.name)"
|
||||
:key="lang.code"
|
||||
class="translate-lang-card"
|
||||
>
|
||||
@@ -363,6 +398,7 @@
|
||||
<div class="translate-lang-grid translate-lang-grid-inline" v-if="translateCustomLangs.length">
|
||||
<div
|
||||
v-for="(lang, idx) in translateCustomLangs"
|
||||
v-if="translateLangVisible(lang.name)"
|
||||
:key="'custom-'+idx"
|
||||
class="translate-lang-card"
|
||||
>
|
||||
@@ -406,7 +442,7 @@
|
||||
|
||||
<template v-for="(category, categoryIndex) in categories" :key="category">
|
||||
<div
|
||||
v-if="isSpecialCategory(category)"
|
||||
v-if="isSpecialCategory(category) && categorySectionVisible(category)"
|
||||
:id="'category-' + category"
|
||||
:class="'transform-category-section randomizer-special'"
|
||||
>
|
||||
@@ -416,7 +452,7 @@
|
||||
</p>
|
||||
<div class="chaos-overlay" aria-hidden="true"></div>
|
||||
<div class="transform-buttons">
|
||||
<div v-for="transform in getTransformsByCategory(category)" :key="getTransformKey(transform)" class="transform-button-group">
|
||||
<div v-for="transform in getFilteredTransformsByCategory(category)" :key="getTransformKey(transform)" class="transform-button-group">
|
||||
<button
|
||||
@click="applyTransform(transform, $event)"
|
||||
:class="'transform-button transform-category-' + category + ' randomizer-button'"
|
||||
@@ -460,12 +496,12 @@
|
||||
|
||||
<!-- Standard category -->
|
||||
<div
|
||||
v-else
|
||||
v-else-if="categorySectionVisible(category)"
|
||||
:id="'category-' + category"
|
||||
:class="'transform-category-section'"
|
||||
>
|
||||
<h4 :class="'category-title transform-category-' + category">
|
||||
{{ category }}
|
||||
{{ formatCategoryLabel(category) }}
|
||||
<span class="category-order-controls">
|
||||
<button
|
||||
v-if="categoryIndex > 0"
|
||||
@@ -486,7 +522,7 @@
|
||||
</span>
|
||||
</h4>
|
||||
<div class="transform-buttons">
|
||||
<div v-for="transform in getTransformsByCategory(category)" :key="getTransformKey(transform)" class="transform-button-group">
|
||||
<div v-for="transform in getFilteredTransformsByCategory(category)" :key="getTransformKey(transform)" class="transform-button-group">
|
||||
<button
|
||||
@click="applyTransform(transform, $event)"
|
||||
:class="'transform-button transform-category-' + category"
|
||||
@@ -531,6 +567,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="transformListHasNoMatches()" class="transform-filter-empty">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
<p>No transforms match your filters.</p>
|
||||
<button type="button" class="btn btn-secondary" @click="clearTransformFilters">Clear filters</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user