@datagouv/components-next 1.0.2-dev.167 → 1.0.2-dev.168

package/dist/{vue3-xml-viewer.common-Cp7Cu5ME.js → vue3-xml-viewer.common-DznVepCg.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-DNoYWfit.js";
+import { g as Ke } from "./main-D7EaQcIR.js";
 import We from "vue";
 function Fe($, K) {
   for (var V = 0; V < K.length; V++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "1.0.2-dev.167",
+  "version": "1.0.2-dev.168",
   "private": false,
   "type": "module",
   "engines": {

package/src/components/BannerAction.vue

@@ -10,7 +10,9 @@
   >
     <div>
       <div class="text-gray-900">
-        {{ title }}
+        <slot name="title">
+          {{ title }}
+        </slot>
       </div>
       <div
         v-if="$slots.default"
@@ -34,7 +36,9 @@ export const bannerActionTypeKey = Symbol() as InjectionKey<'primary' | 'danger'
 <script setup lang="ts">
 const props = defineProps<{
   type: 'primary' | 'danger' | 'warning'
-  title: string
+  // Optional so the title can be a slot, for instance to make it the toggle of a
+  // disclosure whose panel lives in the banner
+  title?: string
 }>()
 
 provide(bannerActionTypeKey, props.type)

package/src/components/Form/SchemaSelect.vue

@@ -8,6 +8,7 @@
     :placeholder="t('Tous les schémas')"
     :get-option-id="(s: RegisteredSchema) => s.name"
     :display-value="(s: RegisteredSchema) => s.name"
+    :filter="schemaMatchesQuery"
     :multiple="false"
   />
 </template>
@@ -16,6 +17,7 @@
 import { useTranslation } from '../../composables/useTranslation'
 import { useSelectModelSync } from '../../composables/useSelectModelSync'
 import { useFetch } from '../../functions/api'
+import { schemaMatchesQuery } from '../../functions/schemas'
 import type { RegisteredSchema } from '../../types/schemas'
 import SearchableSelect from './SearchableSelect.vue'
 

package/src/components/SchemaCard.vue

@@ -1,8 +1,14 @@
 <template>
   <div
+    :id
     class="p-4 relative border bg-white hover:bg-gray-some"
-    :class="{ 'border-gray-default': !selected, 'border-datagouv': selected }"
+    :class="{
+      'border-gray-default': !selected && !active,
+      'border-datagouv': selected && !active,
+      'border-blue-outline': active,
+    }"
     :role="selectable ? 'option' : undefined"
+    :tabindex="selectable ? -1 : undefined"
     :aria-selected="selectable && selected"
   >
     <h3 class="text-base font-bold mb-0 flex items-center gap-1">
@@ -73,7 +79,10 @@ import { useComponentsConfig } from '../config'
 
 defineProps<{
   schema: RegisteredSchema
+  id?: string
   selectable?: boolean
+  // Highlighted by the keyboard inside the listbox, which is not the same as chosen
+  active?: boolean
   selected?: boolean
   showLinks?: boolean
 }>()

package/src/composables/useActiveDescendant.ts

@@ -60,23 +60,28 @@ export function useActiveDescendant<T extends Option>(options: MaybeRefOrGetter<
 
   function handleKeyPressForActiveDescendant(key: KeyboardEvent, alreadyMovedDown = false) {
     switch (key.key as CommonKeyboardKeys) {
+      // An arrow that moves the active option must not also scroll the page behind it
       case 'ArrowDown':
         if (direction === 'vertical' && !alreadyMovedDown && !key.altKey) {
+          key.preventDefault()
           activateNextOption()
         }
         break
       case 'ArrowUp':
         if (direction === 'vertical') {
+          key.preventDefault()
           activatePreviousOption()
         }
         break
       case 'ArrowLeft':
         if (direction === 'horizontal') {
+          key.preventDefault()
           activatePreviousOption()
         }
         break
       case 'ArrowRight':
         if (direction === 'horizontal' && !alreadyMovedDown && !key.altKey) {
+          key.preventDefault()
           activateNextOption()
         }
         break

package/src/functions/schemas.ts

@@ -31,6 +31,33 @@ export function getSchemaVersion(schema: RegisteredSchema | null) {
   }
 }
 
+// Accents and separators must not stand between a query and a schema: people type
+// "lave linge" for « Lave-linge », or « reparabilite » without its accents
+function normalizeForSearch(value: string): string {
+  return value
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/\p{Diacritic}/gu, '')
+    .replace(/[^a-z0-9]+/g, ' ')
+    .trim()
+}
+
+// The name is searched along with the title and the description: it is the identifier
+// people know and paste, such as `etalab/indice-durabilite-lave-linge`
+const searchableText = (schema: RegisteredSchema) => normalizeForSearch(`${schema.name} ${schema.title ?? ''} ${schema.description ?? ''}`)
+
+const queryTokens = (query: string) => normalizeForSearch(query).split(' ').filter(Boolean)
+
+export function schemaMatchesQuery(schema: RegisteredSchema, query: string): boolean {
+  // A query made only of punctuation holds no word to match. Callers short-circuit the
+  // empty query, so matching everything here would only ever answer that case.
+  const tokens = queryTokens(query)
+  if (!tokens.length) return false
+
+  const haystack = searchableText(schema)
+  return tokens.every(token => haystack.includes(token))
+}
+
 export function findSchemaInCatalog(catalog: Array<RegisteredSchema>, schema: Schema | null): RegisteredSchema | null {
   if (!schema) return null
   return catalog.find(registeredSchema => schema.name === registeredSchema.name) || null