feat(hub-ui): pick the language with FormSelect on @antfu/design 0.6

@antfu/design 0.6 keeps portaled overlays inside a shadow root, so the
language setting now uses its FormSelect instead of a native <select>.
The bump swaps floating-vue for vue-afloat across the plugin apps, and the
dock's shadow stylesheet carries vue-afloat's base styles for the design
system's tooltips.

Author: antfubot

packages/hub-ui/package.json

@@ -71,6 +71,7 @@
     "tsx": "catalog:build",
     "unocss": "catalog:frontend",
     "vite": "catalog:build",
-    "vue": "catalog:frontend"
+    "vue": "catalog:frontend",
+    "vue-afloat": "catalog:frontend"
   }
 }

packages/hub-ui/scripts/build-css.ts

@@ -1,3 +1,4 @@
+import { createRequire } from 'node:module'
 import { join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { colors as c } from 'devframe/utils/colors'
@@ -8,13 +9,20 @@ import config from '../uno.config'
 // (`src/client/.generated/css.ts`) that `defineCustomElement` adopts into each
 // shadow root, so the dock stays styled in any host page with no leakage.
 const SRC_DIR = fileURLToPath(new URL('../src/client', import.meta.url))
+const require = createRequire(import.meta.url)
 
 const { sourceCount, css } = await buildShadowCss({
   srcDir: SRC_DIR,
   globs: ['components/**/*.{ts,vue}', 'state/**/*.ts', 'embedded/**/*.ts', 'standalone/**/*.{ts,html}'],
   config,
   primaryRampPath: fileURLToPath(new URL('../../../design/primary-ramp.css', import.meta.url)),
-  userStylePath: join(SRC_DIR, 'style.css'),
+  userStylePath: [
+    join(SRC_DIR, 'style.css'),
+    // `@antfu/design`'s tooltips (ActionIconButton) float through vue-afloat,
+    // whose base styles must live inside the shadow root to reach them.
+    require.resolve('vue-afloat/style.css'),
+    require.resolve('@antfu/design/styles/vue-afloat.css'),
+  ],
   varPrefix: '--un-hub-',
 })
 console.log(`${c.green('✓')} CSS built (${sourceCount} sources, ${(css.length / 1024).toFixed(1)} kB)`)

packages/hub-ui/src/client/components/views-builtin/SettingsAppearance.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { DocksContext } from '@devframes/hub/client'
+import FormSelect from '@antfu/design/components/Form/FormSelect.vue'
 import { computed } from 'vue'
-import { HUB_UI_LOCALES } from '../../../locales'
-import { localePreference, t } from '../../i18n'
+import { HUB_UI_LOCALES, matchLocale } from '../../../locales'
+import { localePreference, setLocalePreference, t } from '../../i18n'
 import { useBranding } from '../../state/branding'
 import { colorSchemePreference, setColorSchemePreference } from '../../state/color-mode'
 import { isDockPopupSupported, requestDockPopupOpen, useIsDockPopupOpen } from '../../state/popup'
@@ -40,7 +41,14 @@ const colorModeOptions = computed(() => [
 
 // Language names stay in their own language so a visitor stranded in the
 // wrong locale can still find theirs.
-const localeOptions = Object.entries(HUB_UI_LOCALES)
+const localeOptions = computed(() => [
+  { value: 'auto', label: t('appearance.languageAuto') },
+  ...Object.entries(HUB_UI_LOCALES).map(([value, label]) => ({ value, label })),
+])
+
+function onLocaleChange(value: string | undefined): void {
+  setLocalePreference(matchLocale(value) ?? 'auto')
+}
 
 function setDockMode(mode: string) {
   if (mode === 'popup') {
@@ -55,21 +63,19 @@ function setDockMode(mode: string) {
 <template>
   <div class="flex flex-col gap-4">
     <!-- Language -->
-    <label class="flex flex-col gap-2">
+    <div class="flex flex-col gap-2">
       <div class="flex flex-col">
         <span class="text-sm">{{ t('appearance.language') }}</span>
         <span class="text-xs op50">{{ t('appearance.languageHint', { productName: branding.productName }) }}</span>
       </div>
-      <select
-        v-model="localePreference"
-        class="w-fit min-w-40 px3 py1.5 text-sm rounded-lg bg-base color-base border border-base outline-none transition-all focus-visible:ring-3 focus-visible:ring-primary-500/30"
-      >
-        <option value="auto">{{ t('appearance.languageAuto') }}</option>
-        <option v-for="[code, name] of localeOptions" :key="code" :value="code" :lang="code">
-          {{ name }}
-        </option>
-      </select>
-    </label>
+      <FormSelect
+        :model-value="localePreference"
+        :options="localeOptions"
+        :aria-label="t('appearance.language')"
+        class="w-fit"
+        @update:model-value="onLocaleChange"
+      />
+    </div>
 
     <!-- Color mode -->
     <div class="flex flex-col gap-2">

plugins/assets/.storybook/preview.ts

@@ -1,7 +1,7 @@
 import type { Decorator, Preview } from '@storybook/vue3-vite'
 import { h } from 'vue'
 import 'virtual:uno.css'
-import 'floating-vue/dist/style.css'
+import 'vue-afloat/style.css'
 import '@antfu/design/styles.css'
 
 const withTheme: Decorator = (story, context) => {

plugins/assets/app/main.ts

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import { applyPanelBranding } from '../../../design/panel-theme'
 import App from './app/App.vue'
 import 'virtual:uno.css'
-import 'floating-vue/dist/style.css'
+import 'vue-afloat/style.css'
 import '@antfu/design/styles.css'
 import '../../../design/primary-ramp.css'
 

plugins/assets/package.json

@@ -85,14 +85,14 @@
     "@vitejs/plugin-vue": "catalog:build",
     "colorjs.io": "catalog:frontend",
     "devframe": "workspace:*",
-    "floating-vue": "catalog:frontend",
     "h3": "catalog:deps",
     "reka-ui": "catalog:frontend",
     "storybook": "catalog:storybook",
     "tsdown": "catalog:build",
     "unocss": "catalog:frontend",
     "vite": "catalog:build",
     "vitest": "catalog:testing",
-    "vue": "catalog:frontend"
+    "vue": "catalog:frontend",
+    "vue-afloat": "catalog:frontend"
   }
 }

plugins/data-inspector/app/main.ts

@@ -4,11 +4,10 @@ import { createApp } from 'vue'
 import { applyPanelBranding } from '../../../design/panel-theme'
 import App from './App.vue'
 import 'virtual:uno.css'
-// floating-vue's base popper/transition structure, then @antfu/design's themed
-// override (recolors the tooltip surface + arrow to the semantic tokens via
-// `--at-apply`, so tooltips match the design system in light and dark).
-import 'floating-vue/dist/style.css'
-import '@antfu/design/styles/floating-vue.css'
+// vue-afloat's base popper structure; `@antfu/design/styles.css` below themes
+// it through the `--vue-afloat-*` variables so tooltips match the design
+// system in light and dark.
+import 'vue-afloat/style.css'
 import '@antfu/design/styles.css'
 import './style.css'
 import '../../../design/primary-ramp.css'

plugins/data-inspector/package.json

@@ -79,7 +79,6 @@
     "@vueuse/core": "catalog:frontend",
     "devframe": "workspace:*",
     "dompurify": "catalog:frontend",
-    "floating-vue": "catalog:frontend",
     "h3": "catalog:deps",
     "jora": "catalog:inlined",
     "reka-ui": "catalog:frontend",
@@ -89,6 +88,7 @@
     "unocss": "catalog:frontend",
     "vite": "catalog:build",
     "vitest": "catalog:testing",
-    "vue": "catalog:frontend"
+    "vue": "catalog:frontend",
+    "vue-afloat": "catalog:frontend"
   }
 }

plugins/inspect/app/main.ts

@@ -4,7 +4,7 @@ import { createApp } from 'vue'
 import { applyPanelBranding } from '../../../design/panel-theme'
 import App from './App.vue'
 import 'virtual:uno.css'
-import 'floating-vue/dist/style.css'
+import 'vue-afloat/style.css'
 import '@antfu/design/styles.css'
 import './style.css'
 import '../../../design/primary-ramp.css'

plugins/inspect/package.json

@@ -76,7 +76,6 @@
     "@vitejs/plugin-vue": "catalog:build",
     "colorjs.io": "catalog:frontend",
     "devframe": "workspace:*",
-    "floating-vue": "catalog:frontend",
     "h3": "catalog:deps",
     "reka-ui": "catalog:frontend",
     "storybook": "catalog:storybook",
@@ -85,6 +84,7 @@
     "vite": "catalog:build",
     "vitest": "catalog:testing",
     "vue": "catalog:frontend",
+    "vue-afloat": "catalog:frontend",
     "ws": "catalog:deps"
   }
 }