feat(primevue): add Icon component and mount Toast + ConfirmDialog services
Two additions complete the F3 runtime scaffolding: apps/app/src/components/Icon.vue — generic Iconify renderer wrapping @iconify/vue's <Icon> component. F4 migration substitutes <VIcon icon="tabler-X" /> with <Icon name="tabler-X" /> at call-sites, producing real SVG output and using the existing Crewli "tabler-*" naming convention. Props: name (required, e.g. "tabler-eye"), optional size. The component avoids @iconify/vue's auto-import for clarity at call-sites. apps/app/src/App.vue — mounts <Toast /> and <ConfirmDialog /> at the template root inside VLocaleProvider. Both render alongside the existing VSnackbar and VDialog confirm patterns during the F3–F4 parallel-mode window. F4 sub-packages migrate call-sites to PrimeVue's useToast() / useConfirm() composables. UnoCSS-style i-tabler-* utility-class rendering (RFC AD-5 v1.0 wording) is not adopted — UnoCSS is not installed in the Crewli stack. The RFC will be aligned in B9. Verification: - pnpm typecheck — clean. - pnpm test — 402 tests pass unchanged. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useTheme } from 'vuetify'
|
import { useTheme } from 'vuetify'
|
||||||
|
import Toast from 'primevue/toast'
|
||||||
|
import ConfirmDialog from 'primevue/confirmdialog'
|
||||||
import ScrollToTop from '@core/components/ScrollToTop.vue'
|
import ScrollToTop from '@core/components/ScrollToTop.vue'
|
||||||
import initCore from '@core/initCore'
|
import initCore from '@core/initCore'
|
||||||
import { initConfigStore, useConfigStore } from '@core/stores/config'
|
import { initConfigStore, useConfigStore } from '@core/stores/config'
|
||||||
@@ -68,5 +70,13 @@ authStore.initialize()
|
|||||||
</VBtn>
|
</VBtn>
|
||||||
</template>
|
</template>
|
||||||
</VSnackbar>
|
</VSnackbar>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
PrimeVue overlay services (F3 — parallel-mode with VSnackbar above
|
||||||
|
and the legacy VDialog confirm patterns until F4 sub-packages
|
||||||
|
migrate call-sites to useToast() and useConfirm()).
|
||||||
|
-->
|
||||||
|
<Toast />
|
||||||
|
<ConfirmDialog />
|
||||||
</VLocaleProvider>
|
</VLocaleProvider>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
35
apps/app/src/components/Icon.vue
Normal file
35
apps/app/src/components/Icon.vue
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
// Generic Iconify renderer — the F4-migration replacement for
|
||||||
|
// <VIcon icon="tabler-X" />. Wraps @iconify/vue's <Icon> component so
|
||||||
|
// call-sites use the existing Crewli icon naming convention
|
||||||
|
// ("tabler-eye", "tabler-user", "tabler-mail-code", …) and get real
|
||||||
|
// SVG output without depending on Vuetify's icon adapter.
|
||||||
|
//
|
||||||
|
// Per RFC AD-5 (corrected in B9): @iconify/vue produces the SVG.
|
||||||
|
// UnoCSS-style i-tabler-* utility classes were considered but not
|
||||||
|
// adopted — UnoCSS is not in the Crewli stack.
|
||||||
|
//
|
||||||
|
// Usage:
|
||||||
|
// <Icon name="tabler-eye" />
|
||||||
|
// <Icon name="tabler-user" size="20" />
|
||||||
|
// <Icon name="tabler-shield-lock" class="text-primary-500" />
|
||||||
|
|
||||||
|
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
name: string
|
||||||
|
size?: number | string
|
||||||
|
}
|
||||||
|
|
||||||
|
withDefaults(defineProps<Props>(), {
|
||||||
|
size: undefined,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<IconifyIcon
|
||||||
|
:icon="name"
|
||||||
|
:width="size"
|
||||||
|
:height="size"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
Reference in New Issue
Block a user