docs: misc fixes

mtorromeo · mtorromeo · commit 24026b41b561 · 2025-10-14T19:02:11.000+02:00
diff --git a/apps/docs/src/App.vue b/apps/docs/src/App.vue
@@ -21,7 +21,7 @@
             <pf-toolbar-content>
               <pf-toolbar-group align="end">
                 <pf-toolbar-item>
-                  <pf-toggle-group v-model="darkTheme">
+                  <pf-toggle-group :model-value="darkTheme" @update:model-value="darkTheme = Boolean($event)" aria-label="Dark mode toggle">
                     <pf-toggle-group-item :value="false">
                       <sun-icon />
                     </pf-toggle-group-item>
diff --git a/apps/docs/src/components/ComponentInfo.vue b/apps/docs/src/components/ComponentInfo.vue
@@ -3,11 +3,14 @@
   <pf-title h="2">
     {{ componentName }} <component-title :name="componentName" />
   </pf-title>
-  <pf-text>
+  <pf-content>
     <pf-button variant="link" inline target="_blank" :href="`https://github.com/mtorromeo/vue-patternfly/blob/main/${src}`">
-      <github-icon /> Source code
+      <template #icon>
+        <github-icon />
+      </template>
+      Source code
     </pf-button>
-  </pf-text>
+  </pf-content>
 
   <template v-if="doc">
     <br>
diff --git a/apps/docs/src/stories/Components/Drawer.story.vue b/apps/docs/src/stories/Components/Drawer.story.vue
@@ -20,9 +20,9 @@
       ## Demo
     </pre>
 
-    <pf-form-select v-model="position" required>
-      <pf-form-select-option value="right" label="right" />
-      <pf-form-select-option value="left" label="left" />
+    <pf-form-select :model-value="position" @update:model-value="position = ($event as 'end' | 'start' | 'bottom')" required>
+      <pf-form-select-option value="end" label="end" />
+      <pf-form-select-option value="start" label="start" />
       <pf-form-select-option value="bottom" label="bottom" />
     </pf-form-select>
     <br /><br />
diff --git a/apps/docs/src/stories/Components/Icon.story.vue b/apps/docs/src/stories/Components/Icon.story.vue
@@ -87,23 +87,23 @@
     </story-canvas>
 
     <story-canvas title="Inline">
-      <pf-text-content>
-        <pf-text component="h1">
+      <pf-content>
+        <h1>
           Heading
           <pf-icon inline>
             <CirclePlusIcon />
           </pf-icon>
-        </pf-text>
-        <pf-text component="p">
+        </h1>
+        <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.
-        </pf-text>
-        <pf-text component="h2">
+        </p>
+        <h2>
           Second level
           <pf-icon inline>
             <CirclePlusIcon />
           </pf-icon>
-        </pf-text>
-        <pf-text component="p">
+        </h2>
+        <p>
           <pf-icon inline>
             <CirclePlusIcon />
           </pf-icon>
@@ -116,7 +116,7 @@
           </strong>
           blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus
           venenatis. Suspendisse potenti.
-        </pf-text>
+        </p>
         <small>
           Sometimes you need small text
           <pf-icon inline>
@@ -140,7 +140,7 @@
           <CirclePlusIcon />
         </pf-icon>
         extra large
-      </pf-text-content>
+      </pf-content>
     </story-canvas>
 
     <story-canvas title="In progress">
diff --git a/apps/docs/src/stories/Components/Select.story.vue b/apps/docs/src/stories/Components/Select.story.vue
@@ -129,12 +129,12 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from 'vue';
+import { reactive, ref, type Ref } from 'vue';
 
 const divider = ref(false);
 const disabled = ref(false);
 const selectedSingle = ref();
-const selectedMulti = ref([]);
+const selectedMulti: Ref<string[]> = ref([]);
 const filter = ref('');
 
 type Option = {
diff --git a/apps/docs/src/stories/Components/Spinner.story.vue b/apps/docs/src/stories/Components/Spinner.story.vue
@@ -26,28 +26,28 @@
     </story-canvas>
 
     <story-canvas title="Inline size">
-      <pf-text-content>
-        <pf-text component="h1">
+      <pf-content>
+        <h1>
           Heading
           <pf-spinner inline aria-label="Spinner in a heading" />
-        </pf-text>
-        <pf-text component="p">
+        </h1>
+        <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.
-        </pf-text>
-        <pf-text component="h2">
+        </p>
+        <h2>
           Second level
           <pf-spinner inline aria-label="spinner in a subheading" />
-        </pf-text>
-        <pf-text component="p">
+        </h2>
+        <p>
           Curabitur accumsan turpis pharetra blandit. Quisque condimentum maximus mi,
           <pf-spinner inline aria-label="Spinner in a paragraph" /> sit amet commodo arcu rutrum id. Proin pretium urna vel
           cursus venenatis. Suspendisse potenti.
-        </pf-text>
+        </p>
         <small>
           Sometimes you need small text
           <pf-spinner inline aria-label="Spinner in a small element" />
         </small>
-      </pf-text-content>
+      </pf-content>
     </story-canvas>
   </doc-page>
 </template>
diff --git a/apps/docs/src/stories/Components/Tooltip.story.vue b/apps/docs/src/stories/Components/Tooltip.story.vue
@@ -36,7 +36,7 @@
         <pf-form-group label="Position">
           <pf-checkbox v-model="flip" label="Flip (used only with position != 'auto')" />
 
-          <pf-form-select v-model="position">
+          <pf-form-select :model-value="position" @update:model-value="position = ($event as Placement)">
             <pf-form-select-option value="auto">auto</pf-form-select-option>
             <pf-form-select-option value="top">top</pf-form-select-option>
             <pf-form-select-option value="bottom">bottom</pf-form-select-option>
@@ -81,7 +81,7 @@
         </pf-form-group>
 
         <pf-form-group label="Distance">
-          <pf-text-input v-model.lazy="distance" />
+          <pf-text-input v-model.lazy="distance" type="number" />
         </pf-form-group>
       </pf-form>
 
diff --git a/apps/docs/src/stories/Layouts/Flex-demo.vue b/apps/docs/src/stories/Layouts/Flex-demo.vue
@@ -7,7 +7,7 @@
           <pf-form component="div" horizontal class="pf-v6-u-mt-lg">
             <pf-form-group label="Direction">
               <pf-form-select v-model="direction">
-                <pf-form-select-option value="">[undefined]</pf-form-select-option>
+                <pf-form-select-option>[undefined]</pf-form-select-option>
                 <pf-form-select-option value="row">row</pf-form-select-option>
                 <pf-form-select-option value="row-reverse">row-reverse</pf-form-select-option>
                 <pf-form-select-option value="column">column</pf-form-select-option>
@@ -17,15 +17,15 @@
 
             <pf-form-group label="Display">
               <pf-form-select v-model="display">
-                <pf-form-select-option value="">[undefined]</pf-form-select-option>
+                <pf-form-select-option>[undefined]</pf-form-select-option>
                 <pf-form-select-option value="flex">flex</pf-form-select-option>
                 <pf-form-select-option value="inline-flex">inline-flex</pf-form-select-option>
               </pf-form-select>
             </pf-form-group>
 
             <pf-form-group label="Justify Content">
               <pf-form-select v-model="justifyContent">
-                <pf-form-select-option value="">[undefined]</pf-form-select-option>
+                <pf-form-select-option>[undefined]</pf-form-select-option>
                 <pf-form-select-option value="flex-start">flex-start</pf-form-select-option>
                 <pf-form-select-option value="flex-end">flex-end</pf-form-select-option>
                 <pf-form-select-option value="center">center</pf-form-select-option>
@@ -37,7 +37,7 @@
 
             <pf-form-group label="Align Items">
               <pf-form-select v-model="alignItems">
-                <pf-form-select-option value="">[undefined]</pf-form-select-option>
+                <pf-form-select-option>[undefined]</pf-form-select-option>
                 <pf-form-select-option value="flex-start">flex-start</pf-form-select-option>
                 <pf-form-select-option value="flex-end">flex-end</pf-form-select-option>
                 <pf-form-select-option value="center">center</pf-form-select-option>
@@ -48,7 +48,7 @@
 
             <pf-form-group label="Align Content">
               <pf-form-select v-model="alignContent">
-                <pf-form-select-option value="">[undefined]</pf-form-select-option>
+                <pf-form-select-option>[undefined]</pf-form-select-option>
                 <pf-form-select-option value="flex-start">flex-start</pf-form-select-option>
                 <pf-form-select-option value="flex-end">flex-end</pf-form-select-option>
                 <pf-form-select-option value="center">center</pf-form-select-option>
@@ -60,7 +60,7 @@
 
             <pf-form-group label="Flex Wrap">
               <pf-form-select v-model="flexWrap">
-                <pf-form-select-option value="">[undefined]</pf-form-select-option>
+                <pf-form-select-option>[undefined]</pf-form-select-option>
                 <pf-form-select-option value="nowrap">nowrap</pf-form-select-option>
                 <pf-form-select-option value="wrap">wrap</pf-form-select-option>
                 <pf-form-select-option value="wrap-reverse">wrap-reverse</pf-form-select-option>
@@ -69,7 +69,7 @@
 
             <pf-form-group label="Space Items">
               <pf-form-select v-model="spaceItems">
-                <pf-form-select-option value="">[undefined]</pf-form-select-option>
+                <pf-form-select-option>[undefined]</pf-form-select-option>
                 <pf-form-select-option value="none">none</pf-form-select-option>
                 <pf-form-select-option value="xs">xs</pf-form-select-option>
                 <pf-form-select-option value="sm">sm</pf-form-select-option>
@@ -84,7 +84,7 @@
 
             <pf-form-group label="Gap">
               <pf-form-select v-model="gap">
-                <pf-form-select-option value="">[undefined]</pf-form-select-option>
+                <pf-form-select-option>[undefined]</pf-form-select-option>
                 <pf-form-select-option value="none">none</pf-form-select-option>
                 <pf-form-select-option value="xs">xs</pf-form-select-option>
                 <pf-form-select-option value="sm">sm</pf-form-select-option>
@@ -99,7 +99,7 @@
 
             <pf-form-group label="Row Gap">
               <pf-form-select v-model="rowGap">
-                <pf-form-select-option value="">[undefined]</pf-form-select-option>
+                <pf-form-select-option>[undefined]</pf-form-select-option>
                 <pf-form-select-option value="none">none</pf-form-select-option>
                 <pf-form-select-option value="xs">xs</pf-form-select-option>
                 <pf-form-select-option value="sm">sm</pf-form-select-option>
@@ -114,7 +114,7 @@
 
             <pf-form-group label="Column Gap">
               <pf-form-select v-model="columnGap">
-                <pf-form-select-option value="">[undefined]</pf-form-select-option>
+                <pf-form-select-option>[undefined]</pf-form-select-option>
                 <pf-form-select-option value="none">none</pf-form-select-option>
                 <pf-form-select-option value="xs">xs</pf-form-select-option>
                 <pf-form-select-option value="sm">sm</pf-form-select-option>
@@ -141,15 +141,15 @@
               <pf-form component="div" horizontal class="pf-v6-u-mt-lg">
                 <pf-form-group label="Align">
                   <pf-form-select v-model="item.align">
-                    <pf-form-select-option value="">[undefined]</pf-form-select-option>
+                    <pf-form-select-option>[undefined]</pf-form-select-option>
                     <pf-form-select-option value="left">left</pf-form-select-option>
                     <pf-form-select-option value="right">right</pf-form-select-option>
                   </pf-form-select>
                 </pf-form-group>
 
                 <pf-form-group label="Align Self">
                   <pf-form-select v-model="item.alignSelf">
-                    <pf-form-select-option value="">default</pf-form-select-option>
+                    <pf-form-select-option>default</pf-form-select-option>
                     <pf-form-select-option value="auto">auto</pf-form-select-option>
                     <pf-form-select-option value="flex-start">flex-start</pf-form-select-option>
                     <pf-form-select-option value="flex-end">flex-end</pf-form-select-option>
@@ -172,7 +172,7 @@
 
                 <pf-form-group label="Spacer">
                   <pf-form-select v-model="item.spacer">
-                    <pf-form-select-option value="">[undefined]</pf-form-select-option>
+                    <pf-form-select-option>[undefined]</pf-form-select-option>
                     <pf-form-select-option value="none">none</pf-form-select-option>
                     <pf-form-select-option value="xs">xs</pf-form-select-option>
                     <pf-form-select-option value="sm">sm</pf-form-select-option>
