Merge pull request #632 from dnum-mi/develop

Develop

Author: laruiss

src/components/DsfrButton/DsfrButton.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { type Ref, computed, ref } from 'vue'
 import { OhVueIcon as VIcon } from 'oh-vue-icons'
-import { type CustomizeIconType } from 'oh-vue-icons'
 
 // import '@gouvfr/dsfr/dist/component/button/button.module.js'
 
@@ -14,7 +13,7 @@ export type DsfrButtonProps = {
   iconOnly?: boolean
   noOutline?: boolean
   size?: 'sm' | 'small' | 'lg' | 'large' | 'md' | 'medium' | '' | undefined
-  icon?: string | CustomizeIconType
+  icon?: string | InstanceType<typeof VIcon>['$props']
   onClick?: ($event: MouseEvent) => void
 }
 

src/components/DsfrFooter/DsfrFooter.vue

@@ -142,12 +142,12 @@ const aLicenceHref = computed(() => {
             />
           </RouterLink>
           <RouterLink
+            v-if="operatorImgSrc"
             class="fr-footer__brand-link"
             :to="operatorTo"
             :title="operatorLinkText"
           >
             <img
-              v-if="operatorImgSrc"
               class="fr-footer__logo  fr-responsive-img"
               :style="[
                 typeof operatorImgStyle === 'string' ? operatorImgStyle : '',

src/components/DsfrModal/DsfrModal.vue

@@ -5,15 +5,18 @@ import { FocusTrap } from 'focus-trap-vue'
 
 import DsfrButtonGroup from '../DsfrButton/DsfrButtonGroup.vue'
 import { onMounted, onBeforeUnmount, computed, ref, nextTick, watch, Ref } from 'vue'
+import { getRandomId } from '@/utils/random-utils'
 
 const props = withDefaults(defineProps<{
+  modalId?: string
   opened?: boolean
   actions?: Record<string, any>[]
   isAlert?: boolean
   origin?: {focus:() => void}
   title: string
   icon?: string
 }>(), {
+  modalId: () => getRandomId('modal', 'dialog'),
   actions: () => [],
   origin: () => ({ focus () {} }), // eslint-disable-line @typescript-eslint/no-empty-function
   icon: undefined,
@@ -35,14 +38,18 @@ const closeBtn: Ref<HTMLButtonElement | null> = ref(null)
 watch(() => props.opened, (newValue) => {
   if (newValue) {
     document.body.classList.add('modal-open')
+    modal.value?.showModal()
     setTimeout(() => {
       closeBtn.value?.focus()
     }, 100)
   } else {
     document.body.classList.remove('modal-open')
+    modal.value?.close()
   }
 })
 
+const modal = ref()
+
 onMounted(() => {
   startListeningToEscape()
 })
@@ -72,10 +79,12 @@ async function close () {
   >
     <dialog
       id="fr-modal-1"
-      aria-labelledby="fr-modal-title-modal-1"
+      ref="modal"
+      :aria-labelledby="modalId"
       :role="role"
       class="fr-modal"
       :class="{'fr-modal--opened': opened}"
+      :open="opened"
     >
       <div class="fr-container fr-container--fluid fr-container-md">
         <div class="fr-grid-row fr-grid-row--center">
@@ -97,7 +106,7 @@ async function close () {
               </div>
               <div class="fr-modal__content">
                 <h1
-                  id="fr-modal-title-modal-1"
+                  :id="modalId"
                   class="fr-modal__title"
                 >
                   <span

src/components/DsfrTable/DsfrTable.vue

@@ -5,15 +5,14 @@ import DsfrTableHeaders from './DsfrTableHeaders.vue'
 import { type DsfrTableHeadersProps } from './DsfrTableHeaders.vue'
 
 const props = withDefaults(defineProps<{
-  title?: string
+  title: string
   headers?: DsfrTableHeadersProps
   rows?:(DsfrTableRowProps | string[])[]
   noCaption?: boolean
   pagination?: boolean
   defaultCurrentPage?: number
   defaultOptionSelected?: number
 }>(), {
-  title: undefined,
   headers: () => [],
   rows: () => [],
   defaultCurrentPage: 1,

src/components/DsfrTable/DsfrTableHeader.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { type ThHTMLAttributes } from 'vue'
-import { type CustomizeIconType, OhVueIcon as VIcon } from 'oh-vue-icons'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 
 export type DsfrTableHeaderProps = {
   header?: string
   headerAttrs?: ThHTMLAttributes & { onClick?: (e: MouseEvent) => void }
-  icon?: CustomizeIconType
+  icon?: InstanceType<typeof VIcon>['$props']
 }
 
 withDefaults(defineProps<DsfrTableHeaderProps>(), {

src/components/DsfrTabs/DsfrTabs.stories.ts

@@ -1,5 +1,6 @@
 import { expect } from '@storybook/jest'
 import { within, userEvent } from '@storybook/testing-library'
+import DsfrButton from '../DsfrButton/DsfrButton.vue'
 import DsfrTabs from './DsfrTabs.vue'
 import DsfrTabContent from './DsfrTabContent.vue'
 
@@ -130,7 +131,7 @@ const customTabTitles = [
 ]
 
 export const OngletsComplexes = (args) => ({
-  components: { DsfrTabs, DsfrTabContent },
+  components: { DsfrTabs, DsfrTabContent, DsfrButton },
   data () {
     return {
       ...args,
@@ -140,6 +141,7 @@ export const OngletsComplexes = (args) => ({
 
   template: `
     <DsfrTabs
+      ref="tabs"
       :tab-list-name="tabListName"
       :tab-titles="tabTitles"
       :initial-selected-index="initialSelectedIndex"
@@ -181,6 +183,24 @@ export const OngletsComplexes = (args) => ({
         <div>Contenu 4 avec d'autres composants</div>
       </DsfrTabContent>
     </DsfrTabs>
+    <div style="display: flex; gap: 1rem; margin-block: 1rem;">
+      <DsfrButton
+        label="Activer le 1er onglet"
+        @click="() => { $refs.tabs.selectFirst() }"
+      />
+      <DsfrButton
+        label="Activer le 2è onglet"
+        @click="() => { $refs.tabs.selectIndex(1) }"
+      />
+      <DsfrButton
+        label="Activer le 3è onglet"
+        @click="() => { $refs.tabs.selectIndex(2) }"
+      />
+      <DsfrButton
+        label="Activer le dernier onglet"
+        @click="() => { $refs.tabs.selectLast() }"
+      />
+    </div>
   `,
 
   methods: {

src/components/DsfrTabs/DsfrTabs.vue

@@ -105,6 +105,12 @@ const selectFirst = async () => {
 const selectLast = async () => {
   await selectIndex(props.tabTitles.length - 1)
 }
+
+defineExpose({
+  selectIndex,
+  selectFirst,
+  selectLast,
+})
 </script>
 
 <template>