메뉴
Reusable FaIconPickerInput element and src/scripts/faIcons catalogs: merged MDI / Font Awesome / Material icon grid, lazy load, search, and q-icon name storage. Use when adding icon fields, regenerating icon catalogs, or wiring the picker into dialogs and forms.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Runs and extends Fantasia Archive tests: Vitest unit tests vs Playwright component and E2E tests, including rebuild-before-Playwright rules and file naming. Use when writing tests, debugging CI, or when the user mentions Vitest, Playwright, component tests, or e2e.
Per-tab editState on opened workspace documents: preview (read-only) vs edit (inputs). Use when adding DocumentWorkspacePage fields, tab session state, or opened_documents snapshot columns.
Maintains the English in-app changelog at i18n/en-US/documents/changeLog.md in strict sync with package.json version, without any automatic version bumping. Changelog text must be user- or release-relevant only—never internal QA, Git meta (commits/pushes), or “updated changelog”. Prefer editing the log in the same commit as the work, before push. Use after substantive app, UX, or user-facing docs changes, or when the user asks for release notes.
Default post-edit verification for Fantasia Archive agents: ESLint on touched paths, full vue-tsc, stylelint on touched styles, and yarn vitest run only on specs connected to the edit batch. Full yarn testbatch:verify is reserved for final cleanup, git commit, and explicit user requests. Use after substantive code edits before reporting work done.
Sets up and runs Fantasia Archive locally using Yarn, Node.js 22.22 or newer, and Quasar Electron mode. Use when installing dependencies, choosing dev vs production build commands, or when the user mentions environment setup, CLI, or first run.
Works on Fantasia Archive Electron main process: app lifecycle, window management, platform tweaks, native integrations, and ipcMain registration (register*Ipc + electron-ipc-bridge channel names). Use when editing electron-main.ts, src-electron/mainScripts/, or main-side tests.
| name | fantasia-icon-picker |
| description | Reusable FaIconPickerInput element and src/scripts/faIcons catalogs: merged MDI / Font Awesome / Material icon grid, lazy load, search, and q-icon name storage. Use when adding icon fields, regenerating icon catalogs, or wiring the picker into dialogs and forms. |
FaIconPickerInput for single q-icon name (mdi-account, fa-solid fa-dragon, person) via v-model. No one-off icon grids in feature dialogs — import src/components/elements/FaIconPickerInput/.
First consumer: Project Settings → Document Templates — optional icon (DialogProjectSettingsDocumentTemplatesDetailPanel.vue).
<FaIconPickerInput
v-model="draftIcon"
test-locator="myFeature-iconInput"
/>
| Prop | Role |
|---|---|
modelValue | Selected q-icon name (may be empty) |
testLocator | Root data-test-locator; trigger {testLocator}-trigger, menu {testLocator}-menu |
defaultIcon | Preview when empty (default mdi-file-outline — FA_ICON_PICKER_EMPTY_PLACEHOLDER_ICON) |
Emit: update:modelValue.
Test hooks: data-test-icon-name on trigger when set; grid cells data-test-icon-name + data-test-locator="…-iconCell".
i18n: faIconPickerInput.* from i18n/<locale>/components/elements/FaIconPickerInput/L_FaIconPickerInput.ts. Mirror keys in externalFileLoader.ts.
q-btn, two-line tooltipQVirtualScroll 16-icon rowsFA_ICON_PICKER_SEARCH_DEBOUNCE_MS (150 ms)q-btn (not round); selected = primary icon color only| Area | Path |
|---|---|
| SFC + menu | FaIconPickerInput.vue, FaIconPickerInputMenuPanel.vue |
| Composable | scripts/faIconPickerInput_manager.ts, faIconPickerInputComposableWiring.ts |
| Styles | styles/_variables.scss, styles/FaIconPickerInput.*.unscoped.scss |
| Types + layout | types/I_faIconPickerInput.ts (FA_ICON_PICKER_ICONS_PER_ROW, FA_ICON_PICKER_VIRTUAL_ROW_HEIGHT_PX sync with SCSS) |
| Level-1 catalog | src/scripts/faIcons/functions/ |
| Level-2 wiring | faIconPickerMergedCatalogLoadWiring.ts, faIconPickerCatalogLazyLoadWiring.ts |
| Catalogs | src/scripts/faIcons/catalogs/*.catalog.json |
| Generator | .utility-scripts/generateFaQuasarIconCatalogs.mjs → yarn generate:icon-catalogs |
| Storybook | _tests/FaIconPickerInput.stories.ts |
| Pack | Examples |
|---|---|
mdi-v7 | mdi-account, mdi-file-outline |
fontawesome-v6 | fa-solid fa-user, fa-brands fa-github |
material-icons | person, home |
loadFaIconPickerMergedCatalogAsync loads FA_ICON_PICKER_PACK_IDS, then mergeFaIconPickerCatalogSlices.
After @quasar/extras or quasar.config.ts icon set changes:
yarn generate:icon-catalogssrc/scripts/faIcons/catalogs/*.catalog.jsonyarn testbatch:verify before commit (catalog regen touches broad lint/coverage surface)Prefer regenerate over hand-editing thousands of lines.
FaIconPickerInputv-model draft string (persist q-icon name in SQLite/store)test-locator; extend Playwright selectorList if user-facingfaIconPickerInput__field + feature BEMsrc/scripts/faIcons/functions/*.ts — pure transformsfaIconPickerInput_manager.ts wires Vue + catalog loadersSee fantasia-two-level-architecture.
| Suite | Location |
|---|---|
| Vitest (SFC) | FaIconPickerInput/_tests/FaIconPickerInput.vitest.test.ts |
| Vitest (composable) | scripts/_tests/createUseFaIconPickerInput.vitest.test.ts |
| Vitest (faIcons) | src/scripts/faIcons/_tests/ |
| Playwright | DialogProjectSettings.playwright.test.ts |