Fixed #1567 - Responsive Dock v2

primefaces · Sep 20, 2021 · b323225 · b323225
1 parent d742114
commit b323225
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 18 deletions.
diff --git a/src/components/dock/Dock.vue b/src/components/dock/Dock.vue
@@ -73,6 +73,11 @@ export default {
     pointer-events: none;
 }
 
+.p-dock-list-container {
+    display: flex;
+    pointer-events: auto;
+}
+
 .p-dock-list {
     margin: 0;
     padding: 0;

diff --git a/src/components/dock/DockSub.vue b/src/components/dock/DockSub.vue
@@ -1,27 +1,29 @@
 <template>
-    <ul ref="list" class="p-dock-list" role="menu" @mouseleave="onListMouseLeave">
-        <li v-for="(item, index) of model" :class="itemClass(index)" :key="index" role="none" @mouseenter="onItemMouseEnter(index)">
-            <DockSubTemplate v-if="templates['item']" :item="item" :template="templates['item']" />
-            <template v-else>
-                <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
-                    <a :href="href" role="menuitem" :class="linkClass(item, {isActive, isExactActive})" :target="item.target"
-                        v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item, navigate)">
+    <div class="p-dock-list-container">
+        <ul ref="list" class="p-dock-list" role="menu" @mouseleave="onListMouseLeave">
+            <li v-for="(item, index) of model" :class="itemClass(index)" :key="index" role="none" @mouseenter="onItemMouseEnter(index)">
+                <DockSubTemplate v-if="templates['item']" :item="item" :template="templates['item']" />
+                <template v-else>
+                    <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
+                        <a :href="href" role="menuitem" :class="linkClass(item, {isActive, isExactActive})" :target="item.target"
+                            v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item, navigate)">
+                            <template v-if="typeof item.icon === 'string'">
+                                <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
+                            </template>
+                            <DockSubIconTemplate v-else :icon="item.icon" />
+                        </a>
+                    </router-link>
+                    <a v-else :href="item.url" role="menuitem" :class="linkClass(item)" :target="item.target"
+                        v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" :tabindex="item.disabled ? null : '0'">
                         <template v-if="typeof item.icon === 'string'">
                             <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
                         </template>
                         <DockSubIconTemplate v-else :icon="item.icon" />
                     </a>
-                </router-link>
-                <a v-else :href="item.url" role="menuitem" :class="linkClass(item)" :target="item.target"
-                    v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" :tabindex="item.disabled ? null : '0'">
-                    <template v-if="typeof item.icon === 'string'">
-                        <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
-                    </template>
-                    <DockSubIconTemplate v-else :icon="item.icon" />
-                </a>
-            </template>
-        </li>
-    </ul>
+                </template>
+            </li>
+        </ul>
+    </div>
 </template>
 
 <script>