fix(Menu): avoid the extra div

algolia · Aug 9, 2018 · 4650aaa · 4650aaa
1 parent 4e680e5
commit 4650aaa
Show file tree

Hide file tree

Showing 2 changed files with 372 additions and 393 deletions.
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
@@ -1,5 +1,8 @@
 <template>
-  <div v-if="state">
+  <div
+    v-if="state"
+    :class="[suit(''), !state.canRefine && suit('', 'noRefinement')]"
+  >
     <slot
       :items="state.items"
       :can-refine="state.canRefine"
@@ -9,35 +12,33 @@
       :create-URL="state.createURL"
       :toggle-show-more="state.toggleShowMore"
     >
-      <div :class="[suit(''), !state.canRefine && suit('', 'noRefinement')]">
-        <ul :class="suit('list')">
-          <li
-            v-for="item in state.items"
-            :key="item.value"
-            :class="[suit('item'), item.isRefined && suit('item', 'selected')]"
+      <ul :class="suit('list')">
+        <li
+          v-for="item in state.items"
+          :key="item.value"
+          :class="[suit('item'), item.isRefined && suit('item', 'selected')]"
+        >
+          <a
+            :href="state.createURL(item.value)"
+            :class="suit('link')"
+            @click.prevent="state.refine(item.value)"
           >
-            <a
-              :href="state.createURL(item.value)"
-              :class="suit('link')"
-              @click.prevent="state.refine(item.value)"
-            >
-              <span :class="suit('label')">{{item.label}}</span>
-              <span :class="suit('count')">{{item.count}}</span>
-            </a>
-          </li>
-        </ul>
+            <span :class="suit('label')">{{item.label}}</span>
+            <span :class="suit('count')">{{item.count}}</span>
+          </a>
+        </li>
+      </ul>
 
-        <button
-          v-if="showShowMoreButton"
-          :class="[suit('showMore'), !state.canToggleShowMore && suit('showMore', 'disabled')]"
-          :disabled="!state.canToggleShowMore"
-          @click.prevent="state.toggleShowMore()"
-        >
-          <slot name="showMoreLabel" :is-showing-more="state.isShowingMore">
-            {{state.isShowingMore ? 'Show less' : 'Show more'}}
-          </slot>
-        </button>
-      </div>
+      <button
+        v-if="showShowMoreButton"
+        :class="[suit('showMore'), !state.canToggleShowMore && suit('showMore', 'disabled')]"
+        :disabled="!state.canToggleShowMore"
+        @click.prevent="state.toggleShowMore()"
+      >
+        <slot name="showMoreLabel" :is-showing-more="state.isShowingMore">
+          {{state.isShowingMore ? 'Show less' : 'Show more'}}
+        </slot>
+      </button>
     </slot>
   </div>
 </template>