chore: upgrade @antfu/design to 0.3.0 and finish data-inspector icon TODO (#110)

Author: antfubot

plugins/data-inspector/package.json

@@ -69,6 +69,7 @@
     "@types/codemirror": "catalog:",
     "@vitejs/plugin-vue": "catalog:build",
     "devframe": "workspace:*",
+    "dompurify": "catalog:frontend",
     "floating-vue": "catalog:frontend",
     "reka-ui": "catalog:frontend",
     "splitpanes": "catalog:",

plugins/data-inspector/src/spa/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { SavedQueryScope } from '../engine'
 import LayoutSplitPane from '@antfu/design/components/Layout/LayoutSplitPane.vue'
+import { provideColorScheme } from '@antfu/design/composables/colorScheme'
 import { Pane } from 'splitpanes'
 import { onMounted, provide } from 'vue'
 import AppHeader from './components/AppHeader.vue'
@@ -10,6 +11,7 @@ import ResultViewer from './components/ResultViewer.vue'
 import SavedQueriesPanel from './components/SavedQueriesPanel.vue'
 import { backend, connect, connection } from './composables/rpc'
 import { useSavedQueries } from './composables/saved'
+import { colorScheme } from './composables/scheme'
 import { useWorkbench, workbenchKey } from './composables/workbench'
 import '@antfu/design/styles.css'
 
@@ -20,6 +22,11 @@ const savedApi = useSavedQueries()
 // receiving it (and mutating it) through props.
 provide(workbenchKey, wb)
 
+// The app owns the color scheme; feed it to @antfu/design's opt-in context so
+// the JS-colored surfaces (hash/hue `DisplayBadge`) tune their contrast to the
+// active mode without threading a `colorScheme` prop through every panel.
+provideColorScheme(() => colorScheme.value)
+
 onMounted(async () => {
   await connect()
   if (!connection.connected)

plugins/data-inspector/src/spa/components/DataShapePanel.vue

@@ -70,7 +70,7 @@ const rootLabel = computed(() => {
       </div>
       <div class="flex-auto" />
       <ActionIconButton
-        size="sm"
+        class="text-sm"
         :icon="loading ? 'i-ph:arrows-clockwise animate-spin' : 'i-ph:arrows-clockwise'"
         label="Refresh data shape"
         tooltip="Refresh"

plugins/data-inspector/src/spa/components/DataSourceSelect.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { DataSourceMeta } from '../../engine'
+import DisplayIconifyRemoteIcon from '@antfu/design/components/Display/DisplayIconifyRemoteIcon.vue'
 import { SelectContent, SelectIcon, SelectItem, SelectItemIndicator, SelectPortal, SelectRoot, SelectTrigger, SelectViewport } from 'reka-ui'
 import { computed } from 'vue'
 
@@ -26,8 +27,9 @@ function iconOf(source: DataSourceMeta | undefined): string {
       class="text-sm px-2.5 outline-none border border-base rounded bg-base inline-flex gap-2 h-9 min-w-52 max-w-80 transition items-center justify-between data-[disabled]:op50 focus-visible:ring-2 focus-visible:ring-primary-500/40"
     >
       <span class="inline-flex items-center gap-2 min-w-0">
-        <!-- TODO: migrate to IconifyIcon.vue in @antfu/design 0.3 -->
-        <span class="shrink-0 color-active" :class="iconOf(active)" aria-hidden="true" />
+        <!-- Source icons are declared per-source at runtime, so render them via
+             the remote-icon component rather than a static (build-extracted) class. -->
+        <DisplayIconifyRemoteIcon :icon="iconOf(active)" class="shrink-0 w-3.5 h-3.5 color-active [&_svg]:h-full [&_svg]:w-full" aria-hidden="true" />
         <span class="truncate font-semibold text-primary">{{ active?.title ?? placeholder ?? 'Data source' }}</span>
       </span>
       <SelectIcon class="op-fade shrink-0">
@@ -47,8 +49,7 @@ function iconOf(source: DataSourceMeta | undefined): string {
             :value="source.id"
             class="text-sm color-base py-1.5 pl-2 pr-2 outline-none rounded-md flex gap-2 cursor-pointer select-none transition items-start relative data-[highlighted]:bg-active"
           >
-            <!-- TODO: migrate to IconifyIcon.vue in @antfu/design 0.3 -->
-            <span class="shrink-0 mt-0.5 color-active" :class="iconOf(source)" aria-hidden="true" />
+            <DisplayIconifyRemoteIcon :icon="iconOf(source)" class="shrink-0 mt-0.5 w-3.5 h-3.5 color-active [&_svg]:h-full [&_svg]:w-full" aria-hidden="true" />
             <span class="flex flex-col min-w-0 flex-1">
               <span class="flex items-center gap-1.5">
                 <span class="truncate font-medium">{{ source.title }}</span>

plugins/data-inspector/src/spa/components/ResultViewer.vue

@@ -64,7 +64,7 @@ watch(() => props.result, (value) => {
         running
       </span>
       <ActionIconButton
-        size="sm"
+        class="text-sm"
         :icon="running ? 'i-ph:arrows-clockwise animate-spin' : 'i-ph:arrows-clockwise'"
         label="Re-run query"
         tooltip="Re-run against the live object"

plugins/data-inspector/src/spa/components/SavedQueriesPanel.vue

@@ -132,11 +132,10 @@ function filterBadges(entry: Query): FilterBadge[] {
         >{{ badge.label }}</span>
         <ActionIconButton
           v-if="entry.saved && !readonly"
-          size="sm"
           icon="i-ph:trash-duotone"
           label="Delete"
           tooltip="Delete"
-          class="op0 group-hover:op100 transition-opacity"
+          class="text-sm op0 group-hover:op100 transition-opacity"
           @click.stop="emit('remove', entry.saved)"
         />
       </div>

plugins/inspect/src/spa/App.vue

@@ -58,7 +58,7 @@ function reload(): void {
         </div>
 
         <ActionIconButton
-          size="sm"
+          class="text-sm"
           :icon="loading ? 'i-ph-arrows-clockwise animate-spin' : 'i-ph-arrows-clockwise'"
           :tooltip="loading ? 'Refreshing…' : 'Refresh'"
           label="Refresh"