Fixed #250 - ReImplemented Steps styles

src/components/steps/Steps.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="containerClass">
+    <div :id="id" :class="containerClass">
         <ul role="tablist">
             <li v-for="(item,index) of model" :key="item.to" :class="getItemClass(item)" :style="item.style" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)">
                 <router-link :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)" v-if="!isItemDisabled(item)" role="presentation">
@@ -16,8 +16,14 @@
 </template>
 
 <script>
+import UniqueComponentId from '../utils/UniqueComponentId';
+
 export default {
     props: {
+        id: {
+            type: String,
+            default: UniqueComponentId()
+        },
 		model: {
             type: Array,
             default: null
@@ -27,6 +33,17 @@ export default {
             default: true
         }
     },
+    stepsStyle: null,
+    watch: {
+		model(newValue) {
+			if (this.model !== newValue) {
+                this.createStyle();
+            }
+        }
+    },
+    mounted() {
+        this.createStyle();
+    },
     methods: {
         onItemClick(event, item) {
             if (item.disabled || this.readonly) {
@@ -52,6 +69,21 @@ export default {
         },
         isItemDisabled(item) {
             return (item.disabled || (this.readonly && !this.isActive(item)));
+        },
+        createStyle() {
+            if (!this.stepsStyle) {
+                this.stepsStyle = document.createElement('style');
+                this.stepsStyle.type = 'text/css';
+                document.body.appendChild(this.stepsStyle);
+            }
+
+            let innerHTML = `
+                #${this.id} .p-steps-item {
+                    flex: 1 0 ${ (100/ this.model.length) }%
+                }
+            `;
+
+            this.stepsStyle.innerHTML = innerHTML;
         }
     },
     computed: {
@@ -70,16 +102,17 @@ export default {
     list-style-type: none;
     padding: 0;
     margin: 0;
-}
+    display: flex;
-
+    flex-wrap: nowrap;
-.p-steps ul:after {
+    flex-direction: row;
-    content: "";
-    display: table;
-    clear: both;
 }
 
 .p-steps .p-steps-item {
-    float: left;
+    width: 100%;
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    justify-content: center;
 }
 
 .p-steps.p-steps-readonly .p-steps-item {
@@ -88,10 +121,10 @@ export default {
 
 .p-steps .p-steps-item .p-menuitem-link {
     text-decoration: none;
-    display: block;
     padding: 1em;
-    position: relative;
+    display: inline-flex;
-    text-align: center;
+    flex-direction: column;
+    align-items: center;
 }
 
 .p-steps .p-steps-item.p-steps-current .p-menuitem-link,
@@ -110,15 +143,12 @@ export default {
 }
 
 @media (max-width: 40em) {
+    .p-steps ul {
+        flex-wrap: wrap;
+    }
+
     .p-steps .p-steps-item .p-menuitem-link {
         padding: 0.5em;
     }
-
-    .p-steps .p-steps-item .p-steps-title {
-        display: none;
-    }
 }
-.p-steps .p-steps-item {
-     width: 25%;
- }
 </style>