fix(html): move inline styles into classes to fix csp issue

Author: MrWook

src/components/DateInput.vue

@@ -4,8 +4,7 @@
     <!-- Calendar Button -->
     <span
       v-if="calendarButton"
-      :class="{'input-group-prepend' : bootstrapStyling}"
-      :style="{'cursor:not-allowed;' : disabled}"
+      :class="{'input-group-prepend' : bootstrapStyling, 'calendar-btn-disabled': disabled}"
       class="vdp-datepicker__calendar-button"
       @click="showCalendar(true)"
     >

src/components/Datepicker.vue

@@ -52,8 +52,7 @@
     <template v-if="isOpen">
       <div
         ref="datepicker"
-        :class="[calendarClass, 'vdp-datepicker__calendar']"
-        :style="calendarStyle"
+        :class="[calendarClass, 'vdp-datepicker__calendar', isInline && 'inline']"
         @mousedown.prevent
       >
         <slot name="beforeCalendarHeader" />
@@ -278,11 +277,6 @@ export default {
       return this.language
     },
 
-    calendarStyle() {
-      return {
-        position: this.isInline ? 'static' : undefined,
-      }
-    },
     isOpen() {
       return this.currentPicker !== ''
     },

src/styles/style.scss

@@ -9,6 +9,10 @@
   * {
     box-sizing: border-box;
   }
+
+  .calendar-btn-disabled {
+    cursor:not-allowed;
+  }
 }
 
 .vdp-datepicker__calendar {
@@ -18,6 +22,10 @@
   width: 300px;
   border: 1px solid #ccc;
 
+  &.inline{
+    position: static;
+  }
+
   header {
     display: block;
     line-height: 40px;