@datagouv/components-next 0.2.0 → 1.0.0

package/src/components/Search/Filter/FilterButtonGroup.vue

@@ -0,0 +1,78 @@
+<template>
+  <RadioGroup
+    :model-value="modelValue ?? ''"
+    :name="name"
+    :legend="label"
+    @update:model-value="emit('update:modelValue', $event === '' ? undefined : $event)"
+  >
+    <RadioInput
+      value=""
+      :count="totalCount"
+      :loading="loading"
+    >
+      {{ allLabel }}
+    </RadioInput>
+    <RadioInput
+      v-for="option in options"
+      :key="option.value"
+      :value="option.value"
+      :count="getCount(option.value)"
+      :loading="loading"
+      :highlighted="props.highlightActive && !!props.modelValue"
+    >
+      <span class="flex items-center gap-1 min-w-0 overflow-hidden">
+        <span
+          class="shrink min-w-0 truncate"
+          :title="option.description ? `${option.label} (${option.description})` : option.label"
+        >{{ option.label }}</span>
+        <span
+          v-if="option.description"
+          class="flex-1 basis-0 min-w-0 text-gray-400 text-xs truncate"
+          :title="option.description"
+        >
+          {{ option.description }}
+        </span>
+      </span>
+    </RadioInput>
+  </RadioGroup>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FacetItem } from '../../../types/search'
+import RadioGroup from '../../RadioGroup.vue'
+import RadioInput from '../../RadioInput.vue'
+
+export interface FilterOption {
+  value: string
+  label: string
+  description?: string
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: string | undefined
+  options: FilterOption[]
+  label: string
+  name: string
+  allLabel?: string
+  facets?: FacetItem[]
+  loading?: boolean
+  highlightActive?: boolean
+}>(), {
+  allLabel: 'Tous',
+  loading: false,
+  highlightActive: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+function getCount(value: string): number | undefined {
+  if (!props.facets) return undefined
+  const facet = props.facets.find(f => f.name === value)
+  return facet?.count ?? 0
+}
+
+const totalCount = computed(() => getCount('all'))
+</script>

package/src/components/Search/Filter/FormatFamilyFilter.vue

@@ -0,0 +1,39 @@
+<template>
+  <FilterButtonGroup
+    :model-value="modelValue"
+    :options="options"
+    :label="t('Format de données')"
+    :all-label="t('Tous')"
+    :facets="facets"
+    :loading="loading"
+    name="format_family"
+    highlight-active
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import type { FacetItem } from '../../../types/search'
+import { useTranslation } from '../../../composables/useTranslation'
+import FilterButtonGroup from './FilterButtonGroup.vue'
+
+defineProps<{
+  modelValue: string | undefined
+  facets?: FacetItem[]
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+const { t } = useTranslation()
+
+const options = [
+  { value: 'tabular', label: t('Tabulaires'), description: 'csv, xls, xlsx, ods, parquet...' },
+  { value: 'machine_readable', label: t('Structurées'), description: 'json, rdf, xml, sql...' },
+  { value: 'geographical', label: t('Géographiques'), description: 'geojson, shp, kml...' },
+  { value: 'documents', label: t('Documents'), description: 'pdf, doc, docx, md, txt, html...' },
+  { value: 'other', label: t('Autre') },
+]
+</script>

package/src/components/Search/Filter/LastUpdateRangeFilter.vue

@@ -0,0 +1,37 @@
+<template>
+  <FilterButtonGroup
+    :model-value="modelValue"
+    :options="options"
+    :label="t('Date de mise à jour')"
+    :all-label="t('Toutes')"
+    :facets="facets"
+    :loading="loading"
+    name="last_update_range"
+    highlight-active
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import type { FacetItem } from '../../../types/search'
+import { useTranslation } from '../../../composables/useTranslation'
+import FilterButtonGroup from './FilterButtonGroup.vue'
+
+defineProps<{
+  modelValue: string | undefined
+  facets?: FacetItem[]
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+const { t } = useTranslation()
+
+const options = [
+  { value: 'last_30_days', label: t('Les 30 derniers jours') },
+  { value: 'last_12_months', label: t('Les 12 derniers mois') },
+  { value: 'last_3_years', label: t('Les 3 dernières années') },
+]
+</script>

package/src/components/Search/Filter/ProducerTypeFilter.vue

@@ -0,0 +1,39 @@
+<template>
+  <FilterButtonGroup
+    :model-value="modelValue"
+    :options="options"
+    :label="t(`Type d'organisation`)"
+    :all-label="t('Toutes')"
+    :facets="facets"
+    :loading="loading"
+    name="producer_type"
+    highlight-active
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import type { FacetItem } from '../../../types/search'
+import { useTranslation } from '../../../composables/useTranslation'
+import FilterButtonGroup from './FilterButtonGroup.vue'
+
+defineProps<{
+  modelValue: string | undefined
+  facets?: FacetItem[]
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+const { t } = useTranslation()
+
+const options = [
+  { value: 'public-service', label: t('Service public') },
+  { value: 'local-authority', label: t('Collectivité territoriale') },
+  { value: 'company', label: t('Entreprise') },
+  { value: 'association', label: t('Association') },
+  { value: 'user', label: t('Utilisateur') },
+]
+</script>

package/src/components/Search/Filter/ReuseTypeFilter.vue

@@ -0,0 +1,42 @@
+<template>
+  <FilterButtonGroup
+    :model-value="modelValue"
+    :options="options"
+    :label="t('Type de réutilisation')"
+    :all-label="t('Tous')"
+    :facets="facets"
+    :loading="loading"
+    name="type"
+    highlight-active
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import type { FacetItem } from '../../../types/search'
+import { useTranslation } from '../../../composables/useTranslation'
+import FilterButtonGroup from './FilterButtonGroup.vue'
+
+defineProps<{
+  modelValue: string | undefined
+  facets?: FacetItem[]
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+const { t } = useTranslation()
+
+const options = [
+  { value: 'visualization', label: t('Visualisation') },
+  { value: 'application', label: t('Application') },
+  { value: 'post', label: t('Article de blog') },
+  { value: 'news_article', label: t('Article de presse') },
+  { value: 'api', label: 'API' },
+  { value: 'paper', label: t('Publication scientifique') },
+  { value: 'idea', label: t('Idée') },
+  { value: 'hardware', label: t('Matériel connecté') },
+]
+</script>