@datagouv/components-next 0.2.0 → 1.0.0

package/src/components/Form/SearchableSelect.vue

@@ -0,0 +1,334 @@
+<template>
+  <div
+    class="fr-input-group"
+    :class="{ 'fr-input-group--error': errorText, 'fr-input-group--warning': !errorText && warningText, 'fr-input-group--valid': validText }"
+  >
+    <label
+      :for="id"
+      :title="explanation"
+      class="fr-label"
+      :class="{ 'sr-only': hideLabel }"
+    >
+      {{ label }}
+      <span
+        v-if="required"
+        class="text-new-primary"
+      >*</span>
+      <span
+        v-if="explanation"
+        class="fr-icon-information-line"
+        aria-hidden="true"
+      />
+      <span
+        v-if="hintText"
+        class="fr-hint-text"
+      >{{ hintText }}</span>
+    </label>
+    <Combobox
+      v-slot="{ open, activeOption }"
+      v-model="model"
+      :multiple
+      :by="compareTwoOptions"
+      :aria-describedby="ariaDescribedBy"
+      :disabled="loading"
+      nullable
+    >
+      <div class="relative mt-1">
+        <div
+          ref="floatingReference"
+          class="relative w-full cursor-default overflow-hidden bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm"
+        >
+          <ComboboxInput
+            :id
+            class="input shadow-input group-data-[input-color=blue]/form:shadow-input-blue !pr-10"
+            :class="showClearButton ? '!pr-[4.5rem]' : '!pr-10'"
+            :display-value="(option: unknown) => option ? displayValue(option as ModelType) : ''"
+            :placeholder
+            @change="query = $event.target.value"
+          />
+          <AnimatedLoader
+            v-if="loading"
+            class="absolute text-lg top-2 right-3 flex items-center justify-end hover:!bg-transparent"
+          />
+          <div
+            v-else
+            class="absolute inset-y-0 flex items-center justify-end pr-2"
+            :class="{
+              'right-0': open,
+              'inset-x-0': !open,
+            }"
+          >
+            <ComboboxButton
+              v-if="! open"
+              class="w-full h-full hover:!bg-transparent"
+              :data-testid="`searchable-select-${simpleSlug(label)}`"
+            />
+            <button
+              v-if="showClearButton"
+              type="button"
+              class="p-2"
+              :title="t('Effacer')"
+              @click.prevent="model = null"
+            >
+              <RiDeleteBinLine class="size-4 text-gray-800" />
+            </button>
+            <ComboboxButton class="p-2">
+              <RiArrowDownSLine class="size-4 text-gray-800" />
+            </ComboboxButton>
+          </div>
+        </div>
+        <TransitionRoot
+          leave="transition ease-in duration-100"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+          @after-leave="query = ''"
+        >
+          <ComboboxOptions
+            ref="popover"
+            :style="floatingStyles"
+            class="z-10 mt-1 absolute max-h-60 min-w-80 w-full overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm pl-0"
+          >
+            <div
+              v-if="!filteredAndGroupedOptions && query !== ''"
+              class="relative cursor-default select-none px-4 py-2 text-gray-700"
+            >
+              {{ t('Aucun résultat') }}
+            </div>
+
+            <div
+              v-for="(groupOptions, group) in filteredAndGroupedOptions"
+              :key="group"
+            >
+              <li
+                v-if="group"
+                class="relative select-none py-4 px-4 list-none bg-gray-100 uppercase text-gray-800 font-semibold text-xs"
+              >
+                {{ group }}
+              </li>
+              <ComboboxOption
+                v-for="option in groupOptions"
+                :key="getOptionId(toValue(option))"
+                v-slot="comboboxSlot"
+                as="template"
+                :value="option"
+              >
+                <li
+                  class="relative cursor-default select-none py-2 pr-4 list-none flex items-center gap-2 text-gray-900"
+                  :class="{
+                    'bg-gray-lower': isActive(activeOption, option),
+                    'pl-2': comboboxSlot.selected,
+                    'pl-6': !comboboxSlot.selected,
+                  }"
+                >
+                  <div
+                    class="flex items-center justify-center aspect-square"
+                  >
+                    <RiCheckLine
+                      v-if="comboboxSlot.selected"
+                      class="size-4 text-new-primary"
+                    />
+                  </div>
+                  <slot
+                    name="option"
+                    v-bind="{ option, active: isActive(activeOption, option) as boolean }"
+                  >
+                    {{ displayValue((multiple ? [option] : option) as ModelType) }}
+                  </slot>
+                </li>
+              </ComboboxOption>
+            </div>
+          </ComboboxOptions>
+        </TransitionRoot>
+      </div>
+    </Combobox>
+    <p
+      v-if="errorText"
+      :id="errorTextId"
+      class="fr-error-text"
+    >
+      {{ errorText }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts" generic="T extends string | number | object, Multiple extends true | false">
+import { ref, computed, onMounted, useId, toValue, useTemplateRef } from 'vue'
+import { useFloating, autoUpdate, autoPlacement } from '@floating-ui/vue'
+import { watchDebounced } from '@vueuse/core'
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from '@headlessui/vue'
+import { RiArrowDownSLine, RiCheckLine, RiDeleteBinLine } from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import AnimatedLoader from '../AnimatedLoader.vue'
+
+type ModelType = Multiple extends false ? T : Array<T>
+
+const props = withDefaults(defineProps<{
+  validText?: string
+  errorText?: string | null
+  warningText?: string | null
+  hintText?: string
+  explanation?: string
+  label: string
+  placeholder?: string
+  loading?: boolean
+  hideLabel?: boolean
+
+  getOptionId?: (option: T) => string | number
+  groupBy?: (option: T) => string
+  displayValue?: (option: ModelType) => string
+  filter?: (option: T, query: string) => boolean
+  options?: Array<T>
+  suggest?: (query: string) => Promise<Array<T>>
+  allowNewOption?: (query: string) => T
+
+  required?: boolean
+  multiple: Multiple
+}>(), {
+  required: false,
+  loading: false,
+  hideLabel: false,
+
+  displayValue: (): string => '',
+
+  groupBy: (): string => '',
+  getOptionId: (option: T): string | number => {
+    if (typeof option === 'string') return option
+    if (typeof option === 'number') return option
+    if (typeof option === 'object' && 'id' in option) return option.id as string
+
+    throw new Error('Please set getOptionId()')
+  },
+  filter: (option: T, query: string): boolean => {
+    const searchables = []
+
+    if (typeof option === 'string') searchables.push(option)
+    if (typeof option === 'number') searchables.push(option.toString())
+    if (typeof option === 'object') {
+      for (const value of Object.values(option)) {
+        if (typeof value !== 'string') continue
+
+        searchables.push(value)
+      }
+    }
+
+    for (const searchable of searchables) {
+      if (searchable.toLocaleLowerCase().includes(query.toLocaleLowerCase())) {
+        return true
+      }
+    }
+
+    return false
+  },
+})
+
+const model = defineModel<ModelType | null>()
+
+const { t } = useTranslation()
+
+const id = useId()
+const errorTextId = useId()
+
+const ariaDescribedBy = computed(() => {
+  if (props.errorText) return errorTextId
+  return ''
+})
+
+const showClearButton = computed(() => !props.required && !props.multiple && model.value)
+
+const query = ref('')
+
+const suggestedOptions = ref<Array<T> | null>(null)
+const fetchSuggests = async () => {
+  if (!props.suggest) return
+
+  const savedQuery = query.value
+  const options = await props.suggest(query.value)
+  if (savedQuery === query.value) {
+    suggestedOptions.value = options
+  }
+}
+
+async function fetchSuggestsQuery(q: string) {
+  query.value = q
+  return fetchSuggests()
+}
+
+defineExpose({
+  fetchSuggestsQuery,
+})
+
+onMounted(async () => {
+  await fetchSuggests()
+})
+
+watchDebounced(query, async () => {
+  await fetchSuggests()
+}, { debounce: 400, maxWait: 800 })
+
+const filteredOptions = computed<Array<T>>(() => {
+  if (props.suggest) {
+    return suggestedOptions.value as Array<T>
+  }
+
+  if (!props.options) throw new Error('Please set options or suggest')
+
+  if (!query.value) return props.options
+  return props.options.filter(option => props.filter(option, query.value))
+})
+const filteredOptionsWithNewOption = computed(() => {
+  if (!props.allowNewOption || !query.value) return filteredOptions.value
+
+  const newOption = props.allowNewOption(query.value)
+  if (filteredOptions.value.find(option => compareTwoOptions(option, newOption))) return filteredOptions.value
+
+  return [
+    newOption,
+    ...filteredOptions.value,
+  ]
+})
+
+const filteredAndGroupedOptions = computed<Record<string, Array<T>>>(() => {
+  if (!filteredOptionsWithNewOption.value) return {}
+
+  const groups = {} as Record<string, Array<T>>
+  for (const option of filteredOptionsWithNewOption.value) {
+    const group = props.groupBy(option)
+    groups[group] = groups[group] || []
+    groups[group].push(option)
+  }
+
+  return groups
+})
+
+function compareTwoOptions(a: T | null, b: T | null) {
+  if (a === b) return true
+  if (!a || !b) return false
+
+  return props.getOptionId(a) === props.getOptionId(b)
+}
+
+function isActive(activeOption: T, currentOption: T) {
+  return activeOption ? props.getOptionId(activeOption) === props.getOptionId(currentOption) : false
+}
+
+function simpleSlug(text: string) {
+  return text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')
+}
+
+const referenceRef = useTemplateRef('floatingReference')
+const floatingRef = useTemplateRef<InstanceType<typeof ComboboxOptions>>('popover')
+const { floatingStyles } = useFloating(referenceRef, floatingRef, {
+  middleware: [autoPlacement({
+    allowedPlacements: ['bottom-start', 'bottom', 'bottom-end'],
+    crossAxis: true,
+  })],
+  whileElementsMounted: autoUpdate,
+})
+</script>

package/src/components/Form/SelectGroup.vue

@@ -0,0 +1,132 @@
+<template>
+  <div
+    class="fr-select-group"
+    :class="selectGroupClass"
+  >
+    <label
+      v-if="!hideLabel"
+      class="fr-label"
+      :for="id"
+    >
+      {{ label }}
+      <span
+        v-if="required"
+        class="text-new-primary"
+      >*</span>
+      <span
+        v-if="hintText"
+        class="fr-hint-text"
+      >{{ hintText }}</span>
+    </label>
+    <select
+      :id="id"
+      v-model="model"
+      class="fr-select group-data-[input-color=blue]/form:!shadow-input-blue"
+      :class="{ 'fr-select--error': hasError, 'fr-select--valid': isValid }"
+      :aria-describedby="ariaDescribedBy"
+      :aria-label="hideLabel ? label : undefined"
+      :required="required"
+      :disabled="disabled"
+    >
+      <option
+        v-if="! hideNullOption"
+        :value="null"
+        disabled
+        hidden
+      >
+        {{ t('Sélectionner une option') }}
+      </option>
+      <option
+        v-for="option in options"
+        :key="String(option.value ?? option.label)"
+        :value="option.value"
+        :disabled="option.disabled"
+        :hidden="option.hidden"
+      >
+        {{ option.label }}
+      </option>
+    </select>
+    <p
+      v-if="isValid"
+      :id="validTextId"
+      class="fr-valid-text"
+    >
+      {{ validText }}
+    </p>
+    <p
+      v-else-if="hasError"
+      :id="errorTextId"
+      class="fr-error-text"
+    >
+      {{ errorText }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import { useTranslation } from '../../composables/useTranslation'
+
+export type SelectOption = {
+  label: string
+  value?: string | boolean | null | undefined
+  disabled?: boolean
+  hidden?: boolean
+  selected?: boolean
+}
+
+export type SelectGroupProps = {
+  disabled?: boolean
+  errorText?: string | null
+  hasError?: boolean
+  hintText?: string
+  isValid?: boolean
+  label: string
+  hideLabel?: boolean
+  modelValue?: string | boolean | null
+  options: Array<SelectOption>
+  required?: boolean
+  validText?: string
+  hideNullOption?: boolean
+}
+
+const model = defineModel<string | boolean | null>()
+
+const props = withDefaults(defineProps<SelectGroupProps>(), {
+  disabled: false,
+  errorText: '',
+  hasError: false,
+  hintText: '',
+  isValid: false,
+  modelValue: undefined,
+  required: false,
+  validText: '',
+  hideLabel: false,
+  hideNullOption: false,
+})
+
+const { t } = useTranslation()
+
+const id = useId()
+
+const errorTextId = computed(() => id + '-desc-error')
+const validTextId = computed(() => id + '-desc-valid')
+const ariaDescribedBy = computed(() => {
+  let describedBy = ''
+  if (props.isValid) {
+    describedBy += ' ' + validTextId.value
+  }
+  else if (props.hasError) {
+    describedBy += ' ' + errorTextId.value
+  }
+  return describedBy
+})
+
+const selectGroupClass = computed(() => {
+  return {
+    'fr-select-group--disabled': props.disabled,
+    'fr-select-group--error': props.hasError,
+    'fr-select-group--valid': props.isValid,
+  }
+})
+</script>

package/src/components/Form/TagSelect.vue

@@ -0,0 +1,38 @@
+<template>
+  <SearchableSelect
+    v-model="model"
+    :options="[]"
+    :suggest="suggestTags"
+    :label="t('Mots clés')"
+    :placeholder="t('Tous les mots clés')"
+    :get-option-id="(tag: string) => tag"
+    :display-value="(tag: string) => tag"
+    :multiple="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { ofetch } from 'ofetch'
+import { useComponentsConfig } from '../../config'
+import { useTranslation } from '../../composables/useTranslation'
+import { useStringSelectSync } from '../../composables/useSelectModelSync'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<string | null>({ default: null })
+const id = defineModel<string | undefined>('id')
+
+const config = useComponentsConfig()
+const { t } = useTranslation()
+
+useStringSelectSync({ model, id })
+
+type TagSuggest = { text: string }
+
+async function suggestTags(q: string) {
+  const tags = await ofetch<TagSuggest[]>('/api/1/tags/suggest/', {
+    baseURL: config.apiBase,
+    query: { q, size: 20 },
+  })
+  return tags.map(tag => tag.text)
+}
+</script>

package/src/components/LeafletMap.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    ref="containerRef"
+    class="h-[400px] w-[400px] fr-raw-link"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import type { GeoJsonObject } from 'geojson'
+
+const props = defineProps<{
+  geojson: GeoJsonObject
+}>()
+
+const containerRef = ref<HTMLElement | null>(null)
+
+onMounted(async () => {
+  await import('leaflet/dist/leaflet.css')
+  const L = await import('leaflet')
+
+  if (!containerRef.value) return
+  const map = L.map(containerRef.value)
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+  }).addTo(map)
+  const geoJSON = L.geoJSON(props.geojson).addTo(map)
+  map.fitBounds(geoJSON.getBounds())
+})
+</script>

package/src/components/LicenseBadge.vue

@@ -0,0 +1,24 @@
+<template>
+  <AppLink
+    v-if="license && license.url"
+    :to="license.url"
+    class="px-1 py-[2px] font-mono bg-gray-some text-gray-medium rounded"
+  >
+    {{ license.title }}
+  </AppLink>
+  <span
+    v-else-if="license"
+    class="px-1 py-[2px] font-mono bg-gray-some text-gray-medium rounded"
+  >
+    {{ license.title }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { License } from '../types/licenses'
+import AppLink from './AppLink.vue'
+
+defineProps<{
+  license: License
+}>()
+</script>

package/src/components/LoadingBlock.vue

@@ -1,7 +1,18 @@
 <template>
   <div class="relative">
     <div :class="{ 'opacity-50 min-h-64': loading }">
-      <slot />
+      <slot
+        v-if="!loading && !hasError && data"
+        :data="data"
+      />
+      <slot
+        v-else-if="hasError"
+        name="error"
+      >
+        <div class="text-center py-8 text-gray-500">
+          Une erreur est survenue lors du chargement.
+        </div>
+      </slot>
     </div>
     <div
       v-if="loading"
@@ -12,15 +23,25 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T">
 import { computed } from 'vue'
 import AnimatedLoader from './AnimatedLoader.vue'
 
 const props = defineProps<{
   status: string
+  data: T | null | undefined
+}>()
+
+defineSlots<{
+  default: (props: { data: NonNullable<T> }) => unknown
+  error: () => unknown
 }>()
 
 const loading = computed(() => {
   return props.status === 'idle' || props.status === 'pending'
 })
+
+const hasError = computed(() => {
+  return props.status === 'error'
+})
 </script>

package/src/components/MarkdownViewer.vue

@@ -2,7 +2,7 @@
 <template>
   <div
     :class="size === 'sm' ? markdownSmClasses : markdownClasses"
-    v-html="formatMarkdown(content, minHeading)"
+    v-html="formatMarkdown(content, { minDepth: minHeading, noHeadings })"
   />
 </template>
 
@@ -12,9 +12,11 @@ import { formatMarkdown, markdownClasses, markdownSmClasses } from '../functions
 withDefaults(defineProps<{
   content: string
   minHeading?: 1 | 2 | 3 | 4 | 5 | 6
+  noHeadings?: boolean
   size?: 'sm' | 'md'
 }>(), {
   minHeading: 3,
   size: 'sm',
+  noHeadings: false,
 })
 </script>

package/src/components/ObjectCard.vue

@@ -0,0 +1,42 @@
+<template>
+  <article
+    class="p-4 border bg-white border-gray-default relative hover:bg-gray-some fr-enlarge-link"
+    :class="articleClass"
+  >
+    <slot name="badge" />
+    <div class="flex flex-wrap md:flex-nowrap gap-4 items-start">
+      <div
+        v-if="$slots.media"
+        class="flex-none"
+      >
+        <div
+          class="flex justify-center items-center border border-gray-lower bg-[#fff] rounded-md overflow-hidden"
+          :class="mediaContainerClass"
+        >
+          <slot name="media" />
+        </div>
+      </div>
+      <div class="flex-1 overflow-hidden">
+        <slot />
+      </div>
+    </div>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  articleClass?: string | string[] | Record<string, boolean>
+  mediaSize?: 'sm' | 'lg'
+}>(), {
+  mediaSize: 'sm',
+})
+
+const mediaContainerClass = computed(() => {
+  if (props.mediaSize === 'lg') {
+    return 'w-[240px] h-[160px]'
+  }
+  return 'p-2'
+})
+</script>

package/src/components/ObjectCardBadge.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="absolute top-0 left-4 fr-grid-row fr-grid-row--middle fr-mt-n3v">
+    <p class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium">
+      <component
+        :is="icon"
+        aria-hidden="true"
+        class="size-4 mr-1"
+      />
+      <slot />
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Only one ObjectCardBadge should be rendered at a time (use v-if/v-else-if),
+// because the absolute positioning will cause multiple badges to overlap.
+import type { Component } from 'vue'
+
+defineProps<{
+  icon: Component
+}>()
+</script>