Extract common code as component

resources/assets/src/components/ClosetItem.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="item" :class="{ 'item-selected': selected }">
-    <div class="item-body" @click="$emit('select')">
+  <texture-item :class="{ 'item-selected': selected }">
+    <div @click="$emit('select')">
       <img :src="previewLink">
     </div>
-    <div class="item-footer">
+
+    <template #footer :class="{ 'item-selected': selected }">
       <p class="texture-name">
         <span :title="name">{{ textureName }} <small>({{ type }})</small></span>
       </p>
@@ -28,16 +29,20 @@
         <li><a v-t="'user.removeItem'" @click="removeClosetItem" /></li>
         <li><a v-if="type !== 'cape'" v-t="'user.setAsAvatar'" @click="setAsAvatar" /></li>
       </ul>
-    </div>
-  </div>
+    </template>
+  </texture-item>
 </template>
 
 <script>
+import TextureItem from './TextureItem.vue'
 import setAsAvatar from './mixins/setAsAvatar'
 import removeClosetItem from './mixins/removeClosetItem'
 
 export default {
   name: 'ClosetItem',
+  components: {
+    TextureItem,
+  },
   mixins: [
     removeClosetItem,
     setAsAvatar,

resources/assets/src/components/SkinLibItem.vue

@@ -1,11 +1,11 @@
 <template>
   <a :href="urlToDetail">
-    <div class="item">
+    <texture-item>
       <div class="item-body">
         <img :src="urlToPreview">
       </div>
 
-      <div class="item-footer">
+      <template #footer>
         <p class="texture-name">
           <span :title="name">{{ name }}
             <small>{{ $t('skinlib.filter.' + type) }}</small>
@@ -26,17 +26,21 @@
         <small v-if="!isPublic" class="more private-label">
           {{ $t('skinlib.private') }}
         </small>
-      </div>
-    </div>
+      </template>
+    </texture-item>
   </a>
 </template>
 
 <script>
+import TextureItem from './TextureItem.vue'
 import addClosetItem from './mixins/addClosetItem'
 import removeClosetItem from './mixins/removeClosetItem'
 
 export default {
   name: 'SkinLibItem',
+  components: {
+    TextureItem,
+  },
   mixins: [
     addClosetItem,
     removeClosetItem,

resources/assets/src/components/TextureItem.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="item">
+    <div class="item-body">
+      <slot />
+    </div>
+    <div class="item-footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TextureItem',
+}
+</script>
+
+<style lang="stylus">
+.item
+  display block
+  background #EFF1F0
+  box-shadow 0 1px 1px rgba(0, 0, 0, 0.1)
+  border-radius 2px
+  float left
+  position relative
+  margin-right 20px
+  margin-bottom 20px
+  cursor pointer
+  width 210px
+  height 196px
+  transition box-shadow 0.1s ease-in-out 0s
+
+.item-body
+  height 166px
+
+  img
+    max-width 100%
+    margin-left 30px
+    margin-top 16px
+    width 150px
+
+@media (max-width: 756px)
+  .item
+    width 45%
+    margin-right 5%
+
+  .item-body > img
+    margin-left 25%
+
+  .texture-name
+    width 65%
+
+@media (max-width: 520px)
+  .item
+    width 100%
+
+  .item-body > img
+    margin-left 30%
+
+  .texture-name
+    width 80%
+
+.item:hover
+  box-shadow 0 6px 12px rgba(0, 0, 0, 0.175)
+
+.item-selected
+  box-shadow 0 6px 12px rgba(0, 0, 0, 0.175)
+
+.item-footer
+  background #50b3ec
+  color #fff
+  font-size 16px
+  height 30px
+  padding 3px 8px
+
+  .more
+    float right
+    margin-left 6px
+    margin-right 3px
+    color #fff
+
+  .more:hover
+    color #dadada
+
+  small
+    font-size 50%
+</style>

resources/assets/src/styles/common.styl

@@ -21,75 +21,6 @@ body, h1, h2, h3, h4, h5, h6
 .main-header .sidebar-toggle::before
   content ''
 
-.item
-  display block
-  background #EFF1F0
-  box-shadow 0 1px 1px rgba(0, 0, 0, 0.1)
-  border-radius 2px
-  float left
-  position relative
-  margin-right 20px
-  margin-bottom 20px
-  cursor pointer
-  width 210px
-  height 196px
-  transition box-shadow 0.1s ease-in-out 0s
-
-.item-body
-  height 166px
-
-  img
-    max-width 100%
-    margin-left 30px
-    margin-top 16px
-    width 150px
-
-@media (max-width: 756px)
-  .item
-    width 45%
-    margin-right 5%
-
-  .item-body > img
-    margin-left 25%
-
-  .texture-name
-    width 65%
-
-@media (max-width: 520px)
-  .item
-    width 100%
-
-  .item-body > img
-    margin-left 30%
-
-  .texture-name
-    width 80%
-
-.item:hover
-  box-shadow 0 6px 12px rgba(0, 0, 0, 0.175)
-
-.item-selected
-  box-shadow 0 6px 12px rgba(0, 0, 0, 0.175)
-
-.item-footer
-  background #50b3ec
-  color #fff
-  font-size 16px
-  height 30px
-  padding 3px 8px
-
-  .more
-    float right
-    margin-left 6px
-    margin-right 3px
-    color #fff
-
-  .more:hover
-    color #dadada
-
-  small
-    font-size 50%
-
 .box-footer > p
   margin 6px 15px 5px 0
 

resources/assets/tests/components/ClosetItem.test.ts

@@ -30,7 +30,7 @@ test('click item body', () => {
   wrapper.find('.item').trigger('click')
   expect(wrapper.emitted().select).toBeUndefined()
 
-  wrapper.find('.item-body').trigger('click')
+  wrapper.find('.item-body > div').trigger('click')
   expect(wrapper.emitted().select).toBeTruthy()
 })