feat: add ability to have gaps between steps. update dependencies

.husky/pre-push

@@ -0,0 +1,2 @@
+yarn lint
+yarn test:unit

.npmignore

@@ -18,4 +18,5 @@ config
 stories
 tests
 coverage
-.eslintrc.js
+.eslintrc.js
+.husky

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-horizontal-timeline",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "private": false,
   "description": "Just a simple horizontal timeline component made with Vue.js",
   "homepage": "https://github.com/guastallaigor/vue-horizontal-timeline#readme",
@@ -24,43 +24,43 @@
     "vue": "^2.6.12"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.11.5",
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "^11.0.0",
-    "@storybook/addon-a11y": "^6.0.22",
-    "@storybook/addon-actions": "^6.0.22",
-    "@storybook/addon-backgrounds": "^6.0.22",
-    "@storybook/addon-knobs": "^6.0.22",
-    "@storybook/addon-viewport": "^6.0.22",
-    "@storybook/vue": "^6.0.22",
-    "@vue/cli-plugin-babel": "^4.5.6",
-    "@vue/cli-plugin-eslint": "^4.5.6",
-    "@vue/cli-plugin-unit-jest": "^4.5.6",
-    "@vue/cli-service": "^4.5.6",
-    "@vue/eslint-config-standard": "^5.1.2",
-    "@vue/test-utils": "^1.1.0",
-    "autoprefixer": "^10.0.1",
+    "@babel/preset-env": "^7.14.2",
+    "@commitlint/cli": "^12.1.4",
+    "@commitlint/config-conventional": "^12.1.4",
+    "@storybook/addon-a11y": "^6.2.9",
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-backgrounds": "^6.2.9",
+    "@storybook/addon-knobs": "^6.2.9",
+    "@storybook/addon-viewport": "^6.2.9",
+    "@storybook/vue": "^6.2.9",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-plugin-eslint": "^4.5.13",
+    "@vue/cli-plugin-unit-jest": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
+    "@vue/eslint-config-standard": "^6.0.0",
+    "@vue/test-utils": "^1.2.0",
+    "autoprefixer": "^10.2.5",
     "babel-core": "6.26.3",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.3.0",
-    "babel-loader": "^8.1.0",
+    "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.2",
     "babel-preset-vue": "^2.0.2",
-    "clean-css-cli": "^4.3.0",
-    "commitizen": "^4.2.1",
-    "core-js": "3.6.5",
-    "eslint": "^7.10.0",
+    "clean-css-cli": "^5.3.0",
+    "commitizen": "^4.2.4",
+    "core-js": "3.12.1",
+    "eslint": "^7.26.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-vue": "^6.2.2",
-    "husky": "^4.3.0",
-    "postcss": "^8.1.1",
-    "postcss-cli": "^8.0.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-standard": "^5.0.0",
+    "eslint-plugin-vue": "^7.9.0",
+    "husky": "^6.0.0",
+    "postcss": "^8.2.15",
+    "postcss-cli": "^8.3.1",
     "rimraf": "^3.0.2",
-    "sass": "^1.26.11",
-    "sass-loader": "^10.0.2",
-    "vue-cli-plugin-storybook": "^1.3.0",
+    "sass": "^1.32.13",
+    "sass-loader": "^11.1.1",
+    "vue-cli-plugin-storybook": "^2.0.0",
     "vue-template-compiler": "^2.6.12"
   },
   "bugs": {

src/assets/css/style.scss

@@ -48,7 +48,7 @@
 				&:last-child {
 					width: 330px;
 				}
-				&:not(:last-child) {
+				&.add-step:not(:last-child) {
 					padding-right: 0px;
 					margin-right: 0px;
 					&::after {

src/components/VueHorizontalTimeline.vue

@@ -2,8 +2,18 @@
   <div class="vue-horizontal-timeline" :style="setTimelineStyles">
     <section class="timeline">
       <ol>
-        <li v-for="(item, i) in items" :key="i" :style="setLineColor">
-          <div class="time" :class="getTimeClass(item)" :style="getTimeStyles" @click="cardClicked(item)">
+        <li
+          v-for="(item, i) in items"
+          :key="i"
+          :style="setLineColor"
+          :class="{'add-step': $scopedSlots.default || item[titleAttr] || item[contentAttr]}"
+        >
+          <div
+            v-if="$scopedSlots.default || item[titleAttr] || item[contentAttr]"
+            class="time"
+            :class="getTimeClass(item)"
+            :style="getTimeStyles" @click="cardClicked(item)"
+          >
             <slot v-if="$scopedSlots.default" v-bind:item="item"/>
             <span
               class="title"

tests/unit/__snapshots__/vue-horizontal-timeline.spec.js.snap

@@ -4,23 +4,23 @@ exports[`When I create the VueHorizontalTimeline component should match snapshot
 <div class="vue-horizontal-timeline">
   <section class="timeline">
     <ol>
-      <li style="background: rgb(3, 169, 244);">
+      <li class="add-step" style="background: rgb(3, 169, 244);">
         <div class="time" style="min-width: 200px;">
           <!----> <span class="title">
             Title example 1
           </span> <span class="content">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio. Nullam non condimentum orci, a cursus magna. Suspendisse te...
           </span></div>
       </li>
-      <li style="background: rgb(3, 169, 244);">
+      <li class="add-step" style="background: rgb(3, 169, 244);">
         <div class="time" style="min-width: 200px;">
           <!----> <span class="title">
             Title example 2
           </span> <span class="content">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio. Nullam non condimentum orci, a cursus magna. Suspendisse te...
           </span></div>
       </li>
-      <li style="background: rgb(3, 169, 244);">
+      <li class="add-step" style="background: rgb(3, 169, 244);">
         <div class="time" style="min-width: 200px;">
           <!----> <span class="title">
             Title example 3