@nuxt-customer-portal/ui 0.3.3 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @nuxt-customer-portal/ui
 
+## 0.4.0
+
+### Minor Changes
+
+- 59c8921: Add reusable appearance presets, validated typography and surface overrides, a light/dark live preview and optional full header logos. Apply saved branding reactively and preserve existing portals through backward-compatible defaults.
+- 59c8921: Configure supported store content and SaaS interface languages using the shared bundled language list. Preserve disabled translations and switch unavailable UI locales to an enabled language.
+
+### Patch Changes
+
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+  - @nuxt-customer-portal/core@0.4.0
+
 ## 0.3.3
 
 ### Patch Changes

package/app/app.config.ts

@@ -24,6 +24,11 @@ export default defineAppConfig({
         content: dropdownContent,
         item: 'data-highlighted:before:bg-accented data-[state=open]:before:bg-accented'
       }
+    },
+    tabs: {
+      slots: {
+        trigger: 'hover:bg-elevated'
+      }
     }
   }
 })

package/app/components/AppHeader.vue

@@ -18,9 +18,23 @@ const props = withDefaults(
 const { t, locale, setLocale } = useI18n()
 const toast = useToast()
 const portalRuntimeSettings = useState<{
-  branding?: { portalName?: string; tagline?: string; markLight?: string; markDark?: string }
-  appearance?: { colorMode?: string }
+  branding?: {
+    portalName?: string
+    tagline?: string
+    markLight?: string
+    markDark?: string
+    logoLight?: string
+    logoDark?: string
+  }
+  appearance?: { colorMode?: string; headerBranding?: string }
+  languages?: string[]
 } | null>('portal-runtime-settings', () => null)
+const availableLanguages = computed(() =>
+  [en, nl].filter(
+    (language) =>
+      !portalRuntimeSettings.value?.languages || portalRuntimeSettings.value.languages.includes(language.code)
+  )
+)
 const colorMode = useColorMode()
 const runtimeBrandName = computed(() => portalRuntimeSettings.value?.branding?.portalName || props.brandName)
 const runtimeTagline = computed(() => portalRuntimeSettings.value?.branding?.tagline || props.brandTagline)
@@ -33,6 +47,15 @@ const runtimeMark = computed(() => {
     ? branding.markDark || branding.markLight || ''
     : branding.markLight || branding.markDark || ''
 })
+const runtimeFullLogo = computed(() => {
+  if (portalRuntimeSettings.value?.appearance?.headerBranding !== 'full-logo') {
+    return ''
+  }
+  const branding = portalRuntimeSettings.value.branding
+  return colorMode.value === 'dark'
+    ? branding?.logoDark || branding?.logoLight || ''
+    : branding?.logoLight || branding?.logoDark || ''
+})
 const showColorModeControl = computed(
   () => !portalRuntimeSettings.value || portalRuntimeSettings.value.appearance?.colorMode === 'user-choice'
 )
@@ -173,7 +196,13 @@ const stopImpersonating = async () => {
           class="flex items-center gap-3 rounded-lg focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
           :aria-label="runtimeBrandName"
         >
-          <div class="relative">
+          <img
+            v-if="runtimeFullLogo"
+            :src="runtimeFullLogo"
+            :alt="runtimeBrandName"
+            class="h-12 w-auto max-w-44 object-contain"
+          />
+          <div v-else class="relative">
             <img v-if="runtimeMark" :src="runtimeMark" alt="" class="size-10 rounded-lg object-contain" />
             <svg
               v-else
@@ -199,7 +228,7 @@ const stopImpersonating = async () => {
           </div>
 
           <!-- Neutral fallback wordmark; host shells can replace the layout entirely. -->
-          <div class="hidden flex-col sm:flex">
+          <div v-if="!runtimeFullLogo" class="hidden flex-col sm:flex">
             <span class="portal-wordmark text-2xl font-bold text-gray-900 dark:text-white leading-tight">
               {{ runtimeBrandName }}
             </span>
@@ -245,8 +274,9 @@ const stopImpersonating = async () => {
       <div class="hidden lg:flex items-center gap-3 ml-auto">
         <UButton icon="i-lucide-search" color="neutral" variant="ghost" size="sm" square @click="searchOpen = true" />
         <ULocaleSelect
+          v-if="availableLanguages.length > 1"
           v-model="currentLocale"
-          :locales="[en, nl]"
+          :locales="availableLanguages"
           :ui="{ content: 'w-max min-w-40', itemLabel: 'whitespace-nowrap' }"
         />
         <UColorModeButton v-if="showColorModeControl" />
@@ -256,7 +286,12 @@ const stopImpersonating = async () => {
       </div>
 
       <!-- Organization Switcher Modal -->
-      <UModal v-model:open="showOrgSwitcherModal" :title="t('menu.switchOrganization')" :ui="{ footer: 'justify-end' }">
+      <UModal
+        v-if="showOrgSwitcherModal"
+        v-model:open="showOrgSwitcherModal"
+        :title="t('menu.switchOrganization')"
+        :ui="{ footer: 'justify-end' }"
+      >
         <template #body>
           <OrganizationSwitcher
             v-if="isAuthenticated"
@@ -283,8 +318,9 @@ const stopImpersonating = async () => {
             @click="searchOpen = true"
           />
           <ULocaleSelect
+            v-if="availableLanguages.length > 1"
             v-model="currentLocale"
-            :locales="[en, nl]"
+            :locales="availableLanguages"
             class="w-32"
             :ui="{ content: 'w-max min-w-40', itemLabel: 'whitespace-nowrap' }"
           />

package/app/components/ConfirmationModal.vue

@@ -53,7 +53,7 @@ const getText = (key: string | undefined, fallback: string): string => {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="getText(title, title)" :ui="{ footer: 'justify-end' }">
+  <UModal v-if="open" v-model:open="open" :title="getText(title, title)" :ui="{ footer: 'justify-end' }">
     <template #body>
       <div class="space-y-4">
         <p class="text-sm text-gray-600 dark:text-gray-400">

package/app/components/InvitationActions.vue

@@ -6,6 +6,7 @@ const props = defineProps<{
   email: string
   role: string | null
   canEdit?: boolean
+  canResend?: boolean
   canRevoke?: boolean
 }>()
 const emit = defineEmits<{ refresh: [] }>()
@@ -46,6 +47,18 @@ const revoke = async () => {
     busy.value = false
   }
 }
+const resend = async () => {
+  busy.value = true
+  try {
+    await api.resend(props.endpoint)
+    toast.add({ title: t('invitationManagement.resent'), color: 'success' })
+    emit('refresh')
+  } catch {
+    toast.add({ title: t('invitationManagement.resendFailed'), color: 'error' })
+  } finally {
+    busy.value = false
+  }
+}
 </script>
 
 <template>
@@ -54,23 +67,36 @@ const revoke = async () => {
       v-if="canEdit"
       icon="i-lucide-pencil"
       color="neutral"
-      variant="ghost"
-      size="sm"
+      variant="outline"
+      size="xs"
       :disabled="busy"
       :aria-label="t('invitationManagement.edit')"
       @click="openEditor"
-    />
+      >{{ t('invitationManagement.edit') }}</UButton
+    >
+    <UButton
+      v-if="canResend"
+      icon="i-lucide-send"
+      color="neutral"
+      variant="outline"
+      size="xs"
+      :loading="busy"
+      :aria-label="t('invitationManagement.resend')"
+      @click="resend"
+      >{{ t('invitationManagement.resend') }}</UButton
+    >
     <UButton
       v-if="canRevoke"
       icon="i-lucide-x"
       color="error"
-      variant="ghost"
-      size="sm"
+      variant="outline"
+      size="xs"
       :disabled="busy"
       :aria-label="t('invitationManagement.revoke')"
       @click="revoking = true"
-    />
-    <UModal v-model:open="editing" :title="t('invitationManagement.edit')">
+      >{{ t('invitationManagement.revoke') }}</UButton
+    >
+    <UModal v-if="editing" v-model:open="editing" :title="t('invitationManagement.edit')">
       <template #body>
         <UForm :state="state" :schema="invitationRoleSchema" novalidate class="space-y-4" @submit="save">
           <p>{{ email }}</p>
@@ -79,12 +105,15 @@ const revoke = async () => {
           </UFormField>
           <div class="flex justify-end gap-2">
             <UButton color="neutral" variant="outline" @click="editing = false">{{ t('common.cancel') }}</UButton>
-            <UButton type="submit" :loading="busy">{{ t('invitationManagement.save') }}</UButton>
+            <UButton type="submit" icon="i-lucide-save" class="ml-auto flex min-w-28 justify-center" :loading="busy">{{
+              t('invitationManagement.save')
+            }}</UButton>
           </div>
         </UForm>
       </template>
     </UModal>
     <ConfirmationModal
+      v-if="revoking"
       v-model:open="revoking"
       title="invitationManagement.revoke"
       message="invitationManagement.confirmRevoke"

package/app/components/PortalListToolbar.vue

@@ -19,7 +19,7 @@ const showFilters = ref(false)
 const showSort = ref(false)
 const toolbar = ref<HTMLElement | null>(null)
 const { width } = useElementSize(toolbar)
-const isMobile = computed(() => width.value < Math.max(660, 160 + props.filters.length * 120 + 232))
+const isMobile = computed(() => width.value < Math.max(660, 160 + props.filters.length * 208 + 232))
 </script>
 
 <template>
@@ -40,7 +40,11 @@ const isMobile = computed(() => width.value < Math.max(660, 160 + props.filters.
           value-key="value"
           :placeholder="filter.placeholder"
           :aria-label="filter.placeholder"
-          class="w-44 min-w-28 shrink"
+          class="w-52 shrink-0"
+          :ui="{
+            content: 'w-max min-w-[var(--reka-select-trigger-width)]',
+            itemLabel: 'whitespace-nowrap'
+          }"
           @update:model-value="emit('filter', filter.key, $event)"
         />
         <div class="ml-auto flex shrink-0 items-center gap-2">
@@ -80,7 +84,7 @@ const isMobile = computed(() => width.value < Math.max(660, 160 + props.filters.
         />
       </template>
     </div>
-    <UModal v-model:open="showFilters" :title="t('common.filters')">
+    <UModal v-if="showFilters" v-model:open="showFilters" :title="t('common.filters')">
       <template #body>
         <div class="space-y-4">
           <UFormField v-for="filter in filters" :key="filter.key" :label="filter.placeholder">
@@ -95,7 +99,7 @@ const isMobile = computed(() => width.value < Math.max(660, 160 + props.filters.
         </div>
       </template>
     </UModal>
-    <UModal v-model:open="showSort" :title="t('common.sort')">
+    <UModal v-if="showSort" v-model:open="showSort" :title="t('common.sort')">
       <template #body>
         <div class="space-y-4">
           <USelect

package/app/composables/useInvitationManagement.ts

@@ -1,4 +1,5 @@
 export const useInvitationManagement = () => ({
   changeRole: (endpoint: string, role: string) => $fetch(endpoint, { method: 'PATCH', body: { role } }),
+  resend: (endpoint: string) => $fetch(`${endpoint}/resend`, { method: 'POST' }),
   revoke: (endpoint: string) => $fetch(endpoint, { method: 'PATCH', body: { status: 'canceled' } })
 })

package/app/composables/useModuleNavigation.ts

@@ -6,7 +6,8 @@ const hasAudience = (
   isAuthenticated: boolean,
   isAdmin: boolean,
   organizationRole: string | null,
-  organizationType: 'PROVIDER' | 'CLIENT' | null
+  organizationType: 'PROVIDER' | 'CLIENT' | null,
+  isPersonalClient: boolean
 ) =>
   audiences.some((audience) => {
     if (audience === 'public') {
@@ -30,6 +31,13 @@ const hasAudience = (
     if (audience === 'clientAdmin') {
       return organizationType === 'CLIENT' && (organizationRole === 'owner' || organizationRole === 'admin')
     }
+    if (audience === 'clientOrganizationAdmin') {
+      return (
+        organizationType === 'CLIENT' &&
+        !isPersonalClient &&
+        (organizationRole === 'owner' || organizationRole === 'admin')
+      )
+    }
     return organizationType === 'PROVIDER' && (organizationRole === 'owner' || organizationRole === 'admin')
   })
 
@@ -37,9 +45,15 @@ export const useModuleNavigation = (sidebarOpen?: Ref<boolean>) => {
   const { t } = useI18n()
   const route = useRoute()
   const { modules: registeredModules } = usePortalFeatures()
-  const { isAuthenticated, isSystemAdmin, activeOrganizationRole, activeOrganizationType } = usePortalSession()
+  const {
+    isAuthenticated,
+    isSystemAdmin,
+    activeOrganizationRole,
+    activeOrganizationType,
+    activeOrganizationIsPersonal
+  } = usePortalSession()
 
-  const modules = computed(() =>
+  const accessibleModules = computed(() =>
     registeredModules.value
       .filter((module) =>
         hasAudience(
@@ -47,15 +61,28 @@ export const useModuleNavigation = (sidebarOpen?: Ref<boolean>) => {
           isAuthenticated.value,
           isSystemAdmin.value,
           activeOrganizationRole.value,
-          activeOrganizationType.value
+          activeOrganizationType.value,
+          activeOrganizationIsPersonal.value
         )
       )
       .map((module) => ({ ...module, label: t(module.labelKey) }))
   )
+  const modules = computed(() =>
+    accessibleModules.value.filter((module) =>
+      hasAudience(
+        module.navigationAudiences ?? module.audiences,
+        isAuthenticated.value,
+        isSystemAdmin.value,
+        activeOrganizationRole.value,
+        activeOrganizationType.value,
+        activeOrganizationIsPersonal.value
+      )
+    )
+  )
 
   const activeModule = computed(
     () =>
-      modules.value
+      accessibleModules.value
         .map((module) => ({
           module,
           matchLength: Math.max(
@@ -78,7 +105,8 @@ export const useModuleNavigation = (sidebarOpen?: Ref<boolean>) => {
             isAuthenticated.value,
             isSystemAdmin.value,
             activeOrganizationRole.value,
-            activeOrganizationType.value
+            activeOrganizationType.value,
+            activeOrganizationIsPersonal.value
           )
         )
         .sort((a, b) => (a.order ?? 100) - (b.order ?? 100))
@@ -104,7 +132,8 @@ export const useModuleNavigation = (sidebarOpen?: Ref<boolean>) => {
           isAuthenticated.value,
           isSystemAdmin.value,
           activeOrganizationRole.value,
-          activeOrganizationType.value
+          activeOrganizationType.value,
+          activeOrganizationIsPersonal.value
         )
       )
       .sort((a, b) => (a.order ?? 100) - (b.order ?? 100))

package/app/composables/useNavigationLinks.ts

@@ -6,7 +6,8 @@ const hasAudience = (
   isAuthenticated: boolean,
   isAdmin: boolean,
   organizationRole: string | null,
-  organizationType: 'PROVIDER' | 'CLIENT' | null
+  organizationType: 'PROVIDER' | 'CLIENT' | null,
+  isPersonalClient: boolean
 ) =>
   audiences.some((audience) => {
     if (audience === 'public') {
@@ -30,6 +31,13 @@ const hasAudience = (
     if (audience === 'clientAdmin') {
       return organizationType === 'CLIENT' && (organizationRole === 'owner' || organizationRole === 'admin')
     }
+    if (audience === 'clientOrganizationAdmin') {
+      return (
+        organizationType === 'CLIENT' &&
+        !isPersonalClient &&
+        (organizationRole === 'owner' || organizationRole === 'admin')
+      )
+    }
     return organizationType === 'PROVIDER' && (organizationRole === 'owner' || organizationRole === 'admin')
   })
 
@@ -37,7 +45,13 @@ export const useNavigationLinks = (sidebarOpen: Ref<boolean>) => {
   const { t } = useI18n()
   const route = useRoute()
   const { navigation } = usePortalFeatures()
-  const { isAuthenticated, isSystemAdmin, activeOrganizationRole, activeOrganizationType } = usePortalSession()
+  const {
+    isAuthenticated,
+    isSystemAdmin,
+    activeOrganizationRole,
+    activeOrganizationType,
+    activeOrganizationIsPersonal
+  } = usePortalSession()
 
   const visibleItems = computed(() =>
     navigation.value.filter(
@@ -47,7 +61,8 @@ export const useNavigationLinks = (sidebarOpen: Ref<boolean>) => {
           isAuthenticated.value,
           isSystemAdmin.value,
           activeOrganizationRole.value,
-          activeOrganizationType.value
+          activeOrganizationType.value,
+          activeOrganizationIsPersonal.value
         ) &&
         (route.path === '/' || !item.audiences.every((audience) => audience === 'public'))
     )

package/app/layouts/default.vue

@@ -2,7 +2,9 @@
 <script setup lang="ts">
 const route = useRoute()
 const toast = useToast()
+const { t } = useI18n()
 const open = ref(false)
+const sidebarCollapsed = ref(false)
 const showFooter = computed(() => route.meta?.public === true)
 
 const { activeModule, activeModuleMenuItems } = useModuleNavigation(open)
@@ -39,7 +41,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="dashboard-layout relative min-h-screen">
+  <div class="dashboard-layout relative min-h-screen" :data-sidebar-collapsed="sidebarCollapsed">
     <!-- AppHeader - fixed at top -->
     <div class="fixed left-0 right-0 z-50" style="top: var(--portal-top-bar-height, 0px)">
       <div class="mx-auto w-full max-w-[1600px] px-4">
@@ -49,30 +51,43 @@ onMounted(async () => {
 
     <UDashboardGroup
       unit="rem"
+      storage-key="portal-dashboard-v2"
       class="px-4 mx-auto max-w-[1600px]! w-full!"
       style="top: var(--portal-top-bar-height, 0px)"
     >
       <UDashboardSidebar
         id="default"
         v-model:open="open"
+        v-model:collapsed="sidebarCollapsed"
         collapsible
         resizable
+        :collapsed-size="4"
         :default-size="18"
         :min-size="18"
         :max-size="24"
-        class="min-w-72 bg-elevated/25 lg:pb-12 data-[collapsed=true]:min-w-0"
+        class="min-w-72 bg-elevated/25 lg:pb-12 data-[collapsed=true]:min-w-16"
         :ui="{ footer: 'lg:border-t lg:border-default' }"
       >
-        <template #header>
-          <div v-if="activeModule" class="flex min-w-0 items-center gap-2 px-2 text-sm font-semibold">
+        <template #header="{ collapsed }">
+          <div v-if="activeModule && !collapsed" class="flex min-w-0 items-center gap-2 px-2 text-sm font-semibold">
             <UIcon v-if="activeModule.icon" :name="activeModule.icon" class="size-4 shrink-0 text-primary" />
             <span class="truncate">{{ activeModule.label }}</span>
           </div>
         </template>
-        <template #default="{ collapsed }">
-          <UDashboardSearchButton :collapsed="collapsed" class="mt-2 bg-transparent ring-default" />
-          <div v-if="!collapsed && activeModule" class="px-2.5 pt-3 pb-1 text-xs font-semibold uppercase text-muted">
-            {{ activeModule.label }}
+        <template #default="{ collapsed, collapse }">
+          <div class="flex items-center pt-3 pb-1" :class="collapsed ? 'justify-center' : 'justify-between px-2.5'">
+            <span v-if="!collapsed && activeModule" class="text-xs font-semibold uppercase text-muted">
+              {{ activeModule.label }}
+            </span>
+            <UButton
+              :icon="collapsed ? 'i-lucide-panel-left-open' : 'i-lucide-panel-left-close'"
+              color="neutral"
+              variant="ghost"
+              size="xs"
+              :aria-label="t(collapsed ? 'common.expandSidebar' : 'common.collapseSidebar')"
+              :title="t(collapsed ? 'common.expandSidebar' : 'common.collapseSidebar')"
+              @click="collapse(!collapsed)"
+            />
           </div>
           <UNavigationMenu
             :collapsed="collapsed"
@@ -93,3 +108,9 @@ onMounted(async () => {
     <AppFooter v-if="showFooter" />
   </div>
 </template>
+
+<style>
+.dashboard-layout[data-sidebar-collapsed='true'] main [class~='max-w-(--ui-container)'] {
+  max-width: none;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt-customer-portal/ui",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "license": "MIT",
   "homepage": "https://nuxt-customer-portal.com",
   "repository": {
@@ -29,7 +29,7 @@
     "@nuxtjs/i18n": "^10.6.0",
     "@pinia/nuxt": "^1.0.1",
     "pinia": "^4.0.2",
-    "@nuxt-customer-portal/core": "^0.3.3"
+    "@nuxt-customer-portal/core": "^0.4.0"
   },
   "peerDependencies": {
     "nuxt": "^4.5.1",

package/portal.manifest.mjs

@@ -1,6 +1,6 @@
 export default {
   id: 'ui',
-  version: '0.3.3',
+  version: '0.4.0',
   source: '@nuxt-customer-portal/ui',
   dependsOn: ['core']
 }