Merge pull request #337 from dnum-mi/fix/bug-with-oh-vue-icons-in-nuxt

DaBadBunny · web-flow · commit 833e2363d821 · 2022-04-22T15:51:25.000+02:00
fix: 🐛 Corrige problème VIcon dans Nuxt
diff --git a/build-css.mjs b/build-css.mjs
@@ -3,26 +3,13 @@ import fs from 'fs'
 import mkdirp from 'mkdirp'
 import postcss from 'postcss'
 import atImport from 'postcss-import'
-import postcssNested from 'postcss-nested'
-import postcssPresetEnv from 'postcss-preset-env'
 import postcssUrl from 'postcss-url'
 import csso from 'postcss-csso'
 
 const postcssPlugins = [
   atImport(),
-  postcssNested,
   postcssUrl({ url: 'inline' }),
-  postcssPresetEnv({
-    autoprefixer: {
-      flexbox: 'no-2009',
-    },
-    stage: 1,
-    features: {
-      'custom-properties': false,
-      'focus-visible-pseudo-class': false,
-    },
-  }),
-  csso,
+  csso(),
 ]
 
 mkdirp.sync('dist')
@@ -56,39 +43,3 @@ fs.readFile('./src/main.css', 'utf8', (err, css) => {
       }
     })
 })
-
-fs.readFile('src/assets/fonts-dsfr.css', 'utf8', (err, css) => {
-  if (err) {
-    console.error(err)
-    throw err
-  }
-  postcss(postcssPlugins)
-    .process(css, {
-      from: 'src/assets/fonts-dsfr.css',
-      to: 'dist/fonts-dsfr.css',
-    })
-    .then(result => {
-      fs.writeFile('dist/vue-dsfr-fonts.css', result.css, () => true)
-      if (result.map) {
-        fs.writeFile('dist/vue-dsfr-fonts.css.map', result.map.toString(), () => true)
-      }
-    })
-})
-
-fs.readFile('src/assets/fonts-essential-dsfr.css', 'utf8', (err, css) => {
-  if (err) {
-    console.error(err)
-    throw err
-  }
-  postcss(postcssPlugins)
-    .process(css, {
-      from: 'src/assets/fonts-dsfr.css',
-      to: 'dist/fonts-dsfr.css',
-    })
-    .then(result => {
-      fs.writeFile('dist/vue-dsfr-fonts-essential.css', result.css, () => true)
-      if (result.map) {
-        fs.writeFile('dist/vue-dsfr-fonts-essential.css.map', result.map.toString(), () => true)
-      }
-    })
-})
diff --git a/package.json b/package.json
@@ -24,25 +24,9 @@
       "require": "./dist/vue-dsfr.css",
       "import": "./dist/vue-dsfr.css"
     },
-    "./dist/vue-dsfr-fonts.css": {
-      "require": "./dist/vue-dsfr-fonts.css",
-      "import": "./dist/vue-dsfr-fonts.css"
-    },
-    "./dist/vue-dsfr-fonts-essentials.css": {
-      "require": "./dist/vue-dsfr-fonts-essentials.css",
-      "import": "./dist/vue-dsfr-fonts-essentials.css"
-    },
     "./styles": {
       "require": "./dist/vue-dsfr.css",
       "import": "./dist/vue-dsfr.css"
-    },
-    "./fonts": {
-      "require": "./dist/vue-dsfr-fonts.css",
-      "import": "./dist/vue-dsfr-fonts.css"
-    },
-    "./fonts-essentials": {
-      "require": "./dist/vue-dsfr-fonts-essentials.css",
-      "import": "./dist/vue-dsfr-fonts-essentials.css"
     }
   },
   "publishConfig": {
diff --git a/src/components/DsfrButton/DsfrButton.vue b/src/components/DsfrButton/DsfrButton.vue
@@ -1,11 +1,16 @@
 <script>
 import { defineComponent } from 'vue'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 
 // import '@gouvfr/dsfr/dist/component/button/button.module.js'
 
 export default defineComponent({
   name: 'DsfrButton',
 
+  components: {
+    VIcon,
+  },
+
   props: {
     disabled: Boolean,
     label: {
diff --git a/src/components/DsfrFooter/DsfrFooter.vue b/src/components/DsfrFooter/DsfrFooter.vue
@@ -1,5 +1,6 @@
 <script>
 import { defineComponent } from 'vue'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 
 import DsfrLogo from '../DsfrLogo/DsfrLogo.vue'
 import DsfrFooterPartners from '../DsfrFooter/DsfrFooterPartners.vue'
@@ -10,6 +11,7 @@ export default defineComponent({
   components: {
     DsfrFooterPartners,
     DsfrLogo,
+    VIcon,
   },
 
   props: {
diff --git a/src/components/DsfrHeader/DsfrHeader.stories.js b/src/components/DsfrHeader/DsfrHeader.stories.js
@@ -50,7 +50,7 @@ export default {
 - \`href\`: URL à passer à \`href\` de la balise \`<a>\` (\`'https://systeme-de-design.gouv.fr\` par ex.) **pour un lien externe uniquement**.
 - \`icon\` Nom de l’icône [Remix Icon](https://remixicon.com/) (ou toute autre icône de [oh-vue-icons](https://oh-vue-icons.netlify.app/)) à afficher (\`'ri-phone-line'\` par ex.)
 - \`iconRight\` Permet de mettre l’icône à droite (si la valeur est \`true\` ou <em>truthy</em> et que \`icon\` est renseigné )
-- \`iconAttrs\` Ensemble des props/attributs à donner à \`<VIcon>\` (Cf. [Doc](https://oh-vue-icons.netlify.app/docs#props)). Ex. : \`{ scale: 0.9, animation: }\`
+- \`iconAttrs\` Ensemble des props/attributs à donner à \`<OhVueIcon>\` (Cf. [Doc](https://oh-vue-icons.netlify.app/docs#props)). Ex. : \`{ scale: 0.9, animation: }\`
 - \`button\`: \`true\` pour avoir une balise \`button\`, \`false\` pour laisser en balise \`a\`
 - accepte aussi tout ce qui peut être mis sur un composant, par exemple \`class\`
 `,
diff --git a/src/components/DsfrHeader/DsfrHeader.vue b/src/components/DsfrHeader/DsfrHeader.vue
@@ -1,5 +1,6 @@
 <script>
 import { defineComponent } from 'vue'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 
 // Pose problème dans les tests, et risque fort de poser problème dans Nuxt
 // import '@gouvfr/dsfr/dist/component/header/header.module.js'
@@ -15,6 +16,7 @@ export default defineComponent({
     DsfrLogo,
     DsfrHeaderMenuLinks,
     DsfrSearchBar,
+    VIcon,
   },
 
   props: {
@@ -26,6 +28,10 @@ export default defineComponent({
       type: String,
       default: undefined,
     },
+    searchLabel: {
+      type: String,
+      default: 'Recherche',
+    },
     homeTo: {
       type: String,
       default: '/',
@@ -175,6 +181,7 @@ export default defineComponent({
               class="fr-header__search  fr-modal"
             >
               <DsfrSearchBar
+                :label="searchLabel"
                 :model-value="modelValue"
                 :placeholder="placeholder"
                 style="justify-content: flex-end"
diff --git a/src/components/DsfrHeader/DsfrHeaderMenuLink.vue b/src/components/DsfrHeader/DsfrHeaderMenuLink.vue
@@ -1,9 +1,14 @@
 <script>
 import { defineComponent } from 'vue'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 
 export default defineComponent({
   name: 'DsfrHeaderMenuLink',
 
+  components: {
+    VIcon,
+  },
+
   props: {
     /* @deprecated Utiliser `to` ou `href` à la place */
     path: {
diff --git a/src/components/DsfrTable/DsfrTableHeader.stories.js b/src/components/DsfrTable/DsfrTableHeader.stories.js
@@ -21,7 +21,7 @@ export default {
     },
     icon: {
       control: 'object',
-      description: 'Objet contenant les props à passer à VIcon (OhVueIcon) pour afficher une icône dans l’en-tête',
+      description: 'Objet contenant les props à passer à OhVueIcon pour afficher une icône dans l’en-tête',
     },
     onClickHeader: {
       action: 'Clic sur en-tête',
diff --git a/src/components/DsfrTable/DsfrTableHeader.vue b/src/components/DsfrTable/DsfrTableHeader.vue
@@ -1,9 +1,14 @@
 <script>
 import { defineComponent } from 'vue'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 
 export default defineComponent({
   name: 'DsfrTableHeader',
 
+  components: {
+    VIcon,
+  },
+
   props: {
     header: {
       type: String,
diff --git a/src/components/DsfrTabs/DsfrTabItem.vue b/src/components/DsfrTabs/DsfrTabItem.vue
@@ -58,7 +58,7 @@ export default defineComponent({
         v-if="icon"
         style="margin-left: -0.25rem; margin-right: 0.5rem; font-size: 0.95rem;"
       >
-        <v-icon
+        <VIcon
           :name="icon"
         />
       </span>
diff --git a/src/components/DsfrTag/DsfrTag.vue b/src/components/DsfrTag/DsfrTag.vue
@@ -1,5 +1,6 @@
 <script>
 import { defineComponent } from 'vue'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 
 // TODO: Pourquoi icône 'check' quand on utilise ce js et qu’on clique sur le premier ?
 // D’autre part, pour les étiquettes sélectionnables posent problème : le JS n’est pas
@@ -8,6 +9,10 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'DsfrTag',
 
+  components: {
+    VIcon,
+  },
+
   props: {
     label: {
       type: String,
diff --git a/src/components/DsfrTag/DsfrTags.stories.js b/src/components/DsfrTag/DsfrTags.stories.js
@@ -6,11 +6,15 @@ import { addIcons } from 'oh-vue-icons'
 import {
   RiArrowLeftFill,
   RiArrowRightFill,
+  RiArrowLeftLine,
+  RiArrowRightLine,
 } from 'oh-vue-icons/icons/ri/index.js'
 
 addIcons(
   RiArrowLeftFill,
   RiArrowRightFill,
+  RiArrowLeftLine,
+  RiArrowRightLine,
 )
 
 export default {
diff --git a/src/demo-app/App.vue b/src/demo-app/App.vue
@@ -10,6 +10,7 @@ import DsfrModal from '../components/DsfrModal/DsfrModal.vue'
 import DsfrFileUpload from '../components/DsfrFileUpload/DsfrFileUpload.vue'
 import DsfrBreadcrumb from '../components/DsfrBreadcrumb/DsfrBreadcrumb.vue'
 import DsfrRadioButtonSet from '../components/DsfrRadioButton/DsfrRadioButtonSet.vue'
+import DsfrAlert from '../components/DsfrAlert/DsfrAlert.vue'
 
 const isModalOpen = ref(false)
 const displayAlert = ref(false)
@@ -215,6 +216,20 @@ const radioTest = ref('')
       />
       Ceci est une modale. Elle peut se fermer sans aucun changement au clic sur le bouton "Fermer" ou bien simplement avec la touche <kbd>Échappe</kbd>
     </DsfrModal>
+
+    <DsfrInput
+      v-model="whatever"
+      label="Label input"
+    >
+      <template #tip>
+        <DsfrAlert v-if="showAlert" />
+        <VIcon
+          name="ri-question-line"
+          @mouseover="showAlert = true"
+          @mouseout="showAlert = false"
+        />
+      </template>
+    </DsfrInput>
   </div>
 </template>
 
diff --git a/src/demo-app/main.js b/src/demo-app/main.js
@@ -1,5 +1,4 @@
 import { createApp } from 'vue'
-import { addIcons } from 'oh-vue-icons'
 
 import {
   RiCheckboxCircleLine,
@@ -13,14 +12,9 @@ import router from './router.js'
 
 import App from './App.vue'
 
-addIcons(
-  RiCheckboxCircleLine,
-  RiNotification3Line,
-)
-
 createApp(App)
   .use(router)
-  .use(VueDsfr)
+  .use(VueDsfr, { icons: [RiCheckboxCircleLine, RiNotification3Line] })
   .mount('#app')
 
 window.dsfr = {
diff --git a/src/icons.js b/src/icons.js
@@ -1,6 +1,4 @@
-import { addIcons } from 'oh-vue-icons'
-
-import {
+export {
   RiAlertFill,
   RiAlertLine,
   RiArrowUpLine,
@@ -79,83 +77,3 @@ import {
   RiYoutubeFill,
   RiChatQuoteLine,
 } from 'oh-vue-icons/icons/ri/index.js'
-
-addIcons(
-  RiAlertFill,
-  RiAlertLine,
-  RiArrowUpLine,
-  RiArrowRightLine,
-  RiArrowDownLine,
-  RiArrowDropDownLine,
-  RiArrowLeftLine,
-  RiArrowUpSLine,
-  RiArrowRightSLine,
-  RiArrowDownSLine,
-  RiArrowLeftSLine,
-  RiChat1Line,
-  RiDoubleQuotesL,
-  RiQuestionFill,
-  RiQuestionLine,
-  RiInformationFill,
-  RiInformationLine,
-  RiCloseLine,
-  RiCheckLine,
-  RiCheckboxCircleFill,
-  RiCheckboxCircleLine,
-  RiErrorWarningFill,
-  RiErrorWarningLine,
-  RiCloseCircleFill,
-  RiCloseCircleLine,
-  RiMenuFill,
-  RiMenu2Fill,
-  RiUserFill,
-  RiUserLine,
-  RiAccountCircleFill,
-  RiAccountCircleLine,
-  RiLockFill,
-  RiLockLine,
-  RiAddLine,
-  RiSubtractLine,
-  RiSearchFill,
-  RiSearchLine,
-  RiSkipBackFill,
-  RiSkipForwardFill,
-  RiEyeLine,
-  RiEyeOffLine,
-  RiPrinterFill,
-  RiPrinterLine,
-  RiFileDownloadFill,
-  RiFileDownloadLine,
-  RiDownloadLine,
-  RiExternalLinkLine,
-  RiEditFill,
-  RiEditLine,
-  RiDeleteBinLine,
-  RiDeleteBinFill,
-  RiSaveFill,
-  RiSaveLine,
-  RiSortAsc,
-  RiSortDesc,
-  RiFileFill,
-  RiFileLine,
-  RiMailFill,
-  RiMailLine,
-  RiPlayFill,
-  RiPlayLine,
-  RiVolumeUpFill,
-  RiVolumeUpLine,
-  RiVolumeMuteFill,
-  RiVolumeMuteLine,
-  RiVolumeDownFill,
-  RiVolumeDownLine,
-  RiPauseCircleFill,
-  RiPauseCircleLine,
-  RiFilePdfFill,
-  RiFilePdfLine,
-  RiFacebookCircleFill,
-  RiTwitterFill,
-  RiInstagramFill,
-  RiLinkedinBoxFill,
-  RiYoutubeFill,
-  RiChatQuoteLine,
-)
diff --git a/src/index.js b/src/index.js
diff --git a/src/main.css b/src/main.css
diff --git a/src/stories/docs/02-guide.stories.mdx b/src/stories/docs/02-guide.stories.mdx
diff --git a/src/stories/fondamentaux/icones-personnalisees.stories.mdx b/src/stories/fondamentaux/icones-personnalisees.stories.mdx

Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,7 @@ export default defineComponent({`
`58`	`58`	`v-if="icon"`
`59`	`59`	`style="margin-left: -0.25rem; margin-right: 0.5rem; font-size: 0.95rem;"`
`60`	`60`	`>`
`61`		`- <v-icon`
	`61`	`+ <VIcon`
`62`	`62`	`:name="icon"`
`63`	`63`	`/>`
`64`	`64`	`</span>`