@datagouv/components-next 1.0.2-dev.243 → 1.0.2-dev.244

package/src/components/SegmentedControl.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="flex"
+    :class="underline ? 'border-b border-gray-default gap-4' : ['bg-gray-lower rounded p-1 gap-1', { 'w-fit': !grow }]"
+    role="group"
+    @keydown="onContainerKeydown"
+  >
+    <button
+      v-for="option in options"
+      :key="option.value"
+      type="button"
+      :aria-pressed="option.value === modelValue"
+      :tabindex="option.value === modelValue ? 0 : -1"
+      class="flex items-center justify-center gap-2 text-sm"
+      :class="[
+        underline ? 'py-2 px-1' : 'rounded py-1.5 px-3',
+        grow ? 'flex-1' : '',
+        option.value === modelValue
+          ? underline
+            ? 'text-new-primary font-bold border-b-2 border-b-new-primary -mb-px'
+            : 'bg-white font-bold shadow-sm'
+          : 'text-gray-medium hover:text-gray-title',
+      ]"
+      @click="$emit('update:modelValue', option.value)"
+    >
+      <component
+        :is="option.icon"
+        v-if="option.icon"
+        class="size-4"
+      />
+      {{ option.label }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+export type SegmentedControlOption = {
+  value: string
+  label: string
+  icon?: Component
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: string
+  options: Array<SegmentedControlOption>
+  // Fill the available width and stretch the segments (default: fit content)
+  grow?: boolean
+  // Underline variant: left-aligned tabs over a bottom border, active segment
+  // in blue with a thicker blue underline (default: pill track)
+  underline?: boolean
+}>(), {
+  grow: false,
+  underline: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Roving tabindex: only the active segment is in the tab order; arrow keys
+// move between segments (standard segmented-control keyboard model).
+function onContainerKeydown(event: KeyboardEvent) {
+  const direction = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0
+  if (!direction && event.key !== 'Home' && event.key !== 'End') return
+  event.preventDefault()
+  const index = props.options.findIndex(o => o.value === props.modelValue)
+  const last = props.options.length - 1
+  const next = event.key === 'Home'
+    ? 0
+    : event.key === 'End'
+      ? last
+      : Math.min(last, Math.max(0, index + direction))
+  const option = props.options[next]
+  if (option) emit('update:modelValue', option.value)
+}
+</script>

package/src/main.ts

@@ -104,6 +104,7 @@ import Tooltip from './components/Tooltip.vue'
 import Toggletip from './components/Toggletip.vue'
 import TopicCard from './components/TopicCard.vue'
 import TranslationT from './components/TranslationT.vue'
+import SegmentedControl from './components/SegmentedControl.vue'
 import GlobalSearch from './components/Search/GlobalSearch.vue'
 import SearchInput from './components/Search/SearchInput.vue'
 import SearchableSelect from './components/Form/SearchableSelect.vue'
@@ -120,6 +121,8 @@ import { configKey, useComponentsConfig, type PluginConfig } from './config.js'
 import { ofetch } from 'ofetch'
 import { useTranslation } from './composables/useTranslation'
 
+export type { SegmentedControlOption } from './components/SegmentedControl.vue'
+
 export { Toaster, toast } from 'vue-sonner'
 
 export * from './composables/useActiveDescendant'
@@ -421,6 +424,7 @@ export {
   TranslationT,
   UserActivityList,
   GlobalSearch,
+  SegmentedControl,
   SearchInput,
   SearchableSelect,
   SelectGroup,

package/src/types/organizations.ts

@@ -78,4 +78,7 @@ export type Organization = {
   // means published. Like `presentation_blocs`, only present when requested with
   // X-Fields.
   presentation_blocs_published_at?: string | null
+  banner_color?: string | null
+  banner_image?: string | null
+  banner_image_position?: number
 }