Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: badge code_to_icon refactor + core variant-* → preset-* migration

Browse Source 
badge ae_comp__badge_obj_view_v2.svelte:
- Replace FA HTML string dict (code_to_html) with Lucide component map
  (code_to_icon) — no FontAwesome dependency for dietary/option icons
- option_1 maps: Biohazard (generic/allergy), Utensils (dietary), Bone,
  Fish, Carrot for specific diets
- option_2 maps: Asterisk (generic flag), Hand (first-time attendee)
- Template: replace {@html option_other_*} with {@const Icon}<Icon /> pattern
- Back-of-badge: shows text label + inline icon

core/ (21 files):
- variant-soft-* → preset-tonal-* (6 variants)
- variant-filled-* → preset-filled-* (6 variants)
- variant-glass-surface → preset-tonal-surface (Skeleton v4 has no glass)
- bare variant-soft → preset-tonal-surface

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-03-16 14:42:28 -04:00
parent 37c9d830f6
commit 80baaa9d91
22 changed files with 289 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view_v2.svelte
View File

@@ -66,7 +66,7 @@
// V2: auto-scaling text component
import Element_fit_text from '$lib/elements/element_fit_text.svelte';
import { Asterisk, Biohazard, Star, Wifi } from 'lucide-svelte';
import { Asterisk, Biohazard, Bone, Carrot, Fish, Hand, Star, Utensils, Wifi } from 'lucide-svelte';
// --- Badge type list from template ---
// Each item: { code: string, name: string }. Drives footer display + (in controls) dropdown.
@@ -294,23 +294,31 @@
let option_other_1_display_opt = 'back_html';
let option_other_2_display_opt = 'back_html';
let code_to_html: any = { option_1: {}, option_2: {} };
code_to_html.option_1['1'] = '<span class="fas fa-biohazard"></span>';
code_to_html.option_1['true'] = '<span class="fas fa-biohazard"></span>';
code_to_html.option_1['True'] = '<span class="fas fa-biohazard"></span>';
code_to_html.option_1['Dairy Free'] = '<span class="fas fa-utensils"></span>';
code_to_html.option_1['Gluten Free'] = '<span class="fas fa-utensils"></span>';
code_to_html.option_1['Halal'] = '<span class="fas fa-utensils"></span>';
code_to_html.option_1['Kosher'] = '<span class="fas fa-utensils"></span>';
code_to_html.option_1['Meat'] = '<span class="fas fa-bone"></span>';
code_to_html.option_1['Pescatarian'] = '<span class="fas fa-fish"></span>';
code_to_html.option_1['Vegan'] = '<span class="fas fa-utensils"></span>';
code_to_html.option_1['Vegetarian'] = '<span class="fas fa-carrot"></span>';
code_to_html.option_2['1'] = '<span class="fas fa-star-of-life"></span>';
code_to_html.option_2['true'] = '<span class="fas fa-star-of-life"></span>';
code_to_html.option_2['True'] = '<span class="fas fa-star-of-life"></span>';
code_to_html.option_2['First Time '] = '<span class="fas fa-hand-paper"></span>';
// Maps badge option field values → Lucide icon components.
// option_1 = dietary/allergy flag; option_2 = special designation (first-time, etc.)
// WHY: Replaces the old code_to_html FA string map — no FontAwesome dependency.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const code_to_icon: { option_1: Record<string, any>; option_2: Record<string, any> } = {
option_1: {
'1': Biohazard,
'true': Biohazard,
'True': Biohazard,
'Dairy Free': Utensils,
'Gluten Free': Utensils,
'Halal': Utensils,
'Kosher': Utensils,
'Meat': Bone,
'Pescatarian': Fish,
'Vegan': Utensils,
'Vegetarian': Carrot,
},
option_2: {
'1': Asterisk,
'true': Asterisk,
'True': Asterisk,
'First Time ': Hand,
}
};
/* *** END *** Legacy ticket/option state */
</script>
@@ -580,9 +588,10 @@
><Biohazard size="1em" /></span
>
{:else if option_other_1_override && ['front_html', 'front_back_html'].includes(option_other_1_display_opt)}
<span class="badge_footer_special_left"
>{@html option_other_1_override}</span
>
{@const Icon1 = code_to_icon.option_1[option_other_1_override]}
<span class="badge_footer_special_left">
{#if Icon1}<Icon1 size="1em" />{/if}
</span>
{/if}
<!-- badge_type_code is the CSS class hook for per-event stylesheets;
@@ -597,9 +606,10 @@
><Asterisk size="1em" /></span
>
{:else if option_other_2_override && ['front_html', 'front_back_html'].includes(option_other_2_display_opt)}
<span class="badge_footer_special_right"
>{@html option_other_2_override}</span
>
{@const Icon2 = code_to_icon.option_2[option_other_2_override]}
<span class="badge_footer_special_right">
{#if Icon2}<Icon2 size="1em" />{/if}
</span>
{/if}
</div>
@@ -796,7 +806,8 @@
{#if option_other_1_override && ['back_bool', 'front_back_bool'].includes(option_other_1_display_opt)}
- {option_other_1_override}
{:else if option_other_1_override && ['back_html', 'front_back_html'].includes(option_other_1_display_opt)}
- {@html option_other_1_override}
{@const BIcon1 = code_to_icon.option_1[option_other_1_override]}
- {option_other_1_override}{#if BIcon1} <BIcon1 size="0.85em" class="inline" />{/if}
{/if}
</div>
{/if}
@@ -806,7 +817,8 @@
{#if option_other_2_override && ['back_bool', 'front_back_bool'].includes(option_other_2_display_opt)}
- {option_other_2_override}
{:else if option_other_2_override && ['back_html', 'front_back_html'].includes(option_other_2_display_opt)}
- {@html option_other_2_override}
{@const BIcon2 = code_to_icon.option_2[option_other_2_override]}
- {option_other_2_override}{#if BIcon2} <BIcon2 size="0.85em" class="inline" />{/if}
{/if}
</div>
{/if}