feat(vuehorizontaltimeline): introduced two new fields on the timelin…

…e item to add custom styles

The VueHorizontalTimeline component now manages two new timeline item fields: stepCssClass and
boxCssClass. These can be used to customize a single item of the timeline

fix #76

src/components/VueHorizontalTimeline.vue

@@ -6,12 +6,12 @@
           v-for="(item, i) in items"
           :key="i"
           :style="setLineColor"
-          :class="{'add-step': $scopedSlots.default || item[titleAttr] || item[contentAttr]}"
+          :class="[{'add-step': $scopedSlots.default || item[titleAttr] || item[contentAttr]}, item.stepCssClass]"
         >
           <div
             v-if="$scopedSlots.default || item[titleAttr] || item[contentAttr]"
             class="time"
-            :class="getTimeClass(item)"
+            :class="[getTimeClass(item), item.boxCssClass]"
             :style="getTimeStyles" @click="cardClicked(item)"
           >
             <slot v-if="$scopedSlots.default" v-bind:item="item"/>
@@ -182,3 +182,13 @@ export default {
 </script>
 
 <style src="../assets/css/style.min.css" scoped></style>
+
+<style>
+.has-color-red {
+  color: red !important;
+}
+
+.has-step-green::after {
+  background: green !important;
+}
+</style>

stories/index.stories.js

@@ -31,7 +31,9 @@ export const Default = () => {
   const label1 = 'Object 1'
   const defaultValue1 = {
     title: 'Title example 1',
-    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 tempor rutrum eros, non pellentesque odio commodo eu. Donec at volutpat enim. Vivamus mattis volutpat urna, sit amet vulputate mauris sollicitudin et. Proin consequat at dolor in sodales. Vestibulum vel porta turpis. Pellentesque sollicitudin justo est, ut dapibus felis luctus mollis. Suspendisse feugiat, metus ut auctor dictum, nulla dui fringilla nisl, a pulvinar ipsum justo non lacus. Integer vestibulum sapien metus, et congue felis efficitur iaculis. Aliquam et mi quis nulla molestie elementum. Vestibulum in nibh nibh.'
+    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 tempor rutrum eros, non pellentesque odio commodo eu. Donec at volutpat enim. Vivamus mattis volutpat urna, sit amet vulputate mauris sollicitudin et. Proin consequat at dolor in sodales. Vestibulum vel porta turpis. Pellentesque sollicitudin justo est, ut dapibus felis luctus mollis. Suspendisse feugiat, metus ut auctor dictum, nulla dui fringilla nisl, a pulvinar ipsum justo non lacus. Integer vestibulum sapien metus, et congue felis efficitur iaculis. Aliquam et mi quis nulla molestie elementum. Vestibulum in nibh nibh.',
+    stepCssClass: 'has-step-green',
+    boxCssClass: 'has-color-red'
   }
   const value1 = object(label1, defaultValue1)