Merge pull request ramp4-pcar4#4 from yileifeng/update-class-component

Update vue class component + property decorator
dnlnashed · Aug 17, 2023 · f889345 · f889345
2 parents ca29209 + bf57889
commit f889345
Show file tree

Hide file tree

Showing 22 changed files with 44 additions and 50 deletions.
diff --git a/src/app.vue b/src/app.vue
@@ -1,13 +1,19 @@
 <template>
     <div id="app" class="storyramp-app bg-white">
-        <router-view :key="$route.path"></router-view>
+        <!-- <router-view :key="$route.path"></router-view> -->
+        <story></story>
     </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Options, Vue } from 'vue-property-decorator';
+import StoryV from '@storylines/components/story/story.vue';
 
-@Component({})
+@Options({
+    components: {
+        story: StoryV
+    }
+})
 export default class App extends Vue {}
 </script>
 

diff --git a/src/components/panels/audio-panel.vue b/src/components/panels/audio-panel.vue
@@ -6,9 +6,8 @@
 
 <script lang="ts">
 import { AudioPanel } from '@storylines/definitions';
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Prop, Vue } from 'vue-property-decorator';
 
-@Component({})
 export default class AudioPanelV extends Vue {
     @Prop() config!: AudioPanel;
 }

diff --git a/src/components/panels/chart-panel.vue b/src/components/panels/chart-panel.vue
@@ -28,13 +28,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Options, Prop, Vue } from 'vue-property-decorator';
 import { ChartPanel, ConfigFileStructure } from '@storylines/definitions';
 import { Hooper, Navigation as HooperNavigation, Pagination as HooperPagination, Slide } from 'hooper';
 import 'hooper/dist/hooper.css';
 import ChartV from '@storylines/components/panels/helpers/chart.vue';
 
-@Component({
+@Options({
     components: {
         'dqv-chart': ChartV,
         Hooper,

diff --git a/src/components/panels/dynamic-panel.vue b/src/components/panels/dynamic-panel.vue
@@ -49,10 +49,10 @@
 import Scrollama from 'vue-scrollama';
 import MarkdownIt from 'markdown-it';
 
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Options, Prop, Vue } from 'vue-property-decorator';
 import { BasePanel, DynamicPanel } from '@storylines/definitions';
 
-@Component({
+@Options({
     components: {
         panel: () => import('./panel.vue'),
         Scrollama

diff --git a/src/components/panels/helpers/chart.vue b/src/components/panels/helpers/chart.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Options, Prop, Vue } from 'vue-property-decorator';
 import {
     ChartConfig,
     ConfigFileStructure,
@@ -40,7 +40,7 @@ interface CSVDataRow {
     [column: string]: string | number;
 }
 
-@Component({
+@Options({
     components: {
         highcharts: Chart
     }

diff --git a/src/components/panels/helpers/fullscreen.vue b/src/components/panels/helpers/fullscreen.vue
@@ -42,9 +42,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Prop, Vue } from 'vue-property-decorator';
 
-@Component
 export default class FullscreenV extends Vue {
     @Prop() expandable!: boolean;
     @Prop() type!: string;

diff --git a/src/components/panels/helpers/scrollguard.vue b/src/components/panels/helpers/scrollguard.vue
@@ -7,9 +7,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Prop, Vue } from 'vue-property-decorator';
 
-@Component
 export default class Scrollguard extends Vue {
     @Prop() lang!: string;
 }

diff --git a/src/components/panels/helpers/time-slider.vue b/src/components/panels/helpers/time-slider.vue
@@ -59,11 +59,10 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Prop, Vue } from 'vue-property-decorator';
 import { TimeSliderConfig } from '@storylines/definitions';
 import noUiSlider, { API, PipsMode } from 'nouislider';
 
-@Component
 export default class TimeSlider extends Vue {
     @Prop() config!: TimeSliderConfig;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

diff --git a/src/components/panels/image-panel.vue b/src/components/panels/image-panel.vue
@@ -21,12 +21,12 @@
 
 <script lang="ts">
 import { ImagePanel } from '@storylines/definitions';
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Options, Prop, Vue } from 'vue-property-decorator';
 
 import MarkdownIt from 'markdown-it';
 import FullscreenV from '@storylines/components/panels/helpers/fullscreen.vue';
 
-@Component({
+@Options({
     components: {
         'full-screen': FullscreenV
     }

diff --git a/src/components/panels/loading-panel.vue b/src/components/panels/loading-panel.vue
@@ -8,10 +8,10 @@
 
 <script lang="ts">
 import Scrollama from 'vue-scrollama';
-import { Component, Vue } from 'vue-property-decorator';
+import { Options, Vue } from 'vue-property-decorator';
 // import Circle2 from 'vue-loading-spinner/src/components/Circle2.vue';
 
-@Component({
+@Options({
     components: {
         Scrollama
         // spinner: Circle2

diff --git a/src/components/panels/map-panel.vue b/src/components/panels/map-panel.vue
@@ -24,14 +24,11 @@
 
 <script lang="ts">
 import { ConfigFileStructure, MapPanel } from '@storylines/definitions';
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Prop, Vue } from 'vue-property-decorator';
 
 import TimeSlider from '@storylines/components/panels/helpers/time-slider.vue';
 import Scrollguard from '@storylines/components/panels/helpers/scrollguard.vue';
 
-@Component({
-    components: {}
-})
 export default class MapPanelV extends Vue {
     @Prop() config!: MapPanel;
     @Prop() slideIdx!: number;

diff --git a/src/components/panels/panel.vue b/src/components/panels/panel.vue
@@ -20,8 +20,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { VueConstructor } from 'vue/types/umd';
+import { Options, Prop, Vue } from 'vue-property-decorator';
 import { BasePanel, ConfigFileStructure, PanelType } from '@storylines/definitions';
 
 import TextPanelV from './text-panel.vue';
@@ -34,7 +33,7 @@ import ChartPanelV from './chart-panel.vue';
 import DynamicPanelV from './dynamic-panel.vue';
 import LoadingPanelV from './loading-panel.vue';
 
-@Component({
+@Options({
     components: {
         TextPanelV
     }
@@ -49,8 +48,8 @@ export default class PanelV extends Vue {
     /**
      * Returns the corresponding component for this panel.
      */
-    getTemplate(): VueConstructor {
-        const panelTemplates: Record<PanelType | string, VueConstructor> = {
+    getTemplate(): typeof Vue {
+        const panelTemplates: Record<PanelType | string, typeof Vue> = {
             [PanelType.Text]: TextPanelV,
             [PanelType.Map]: MapPanelV,
             [PanelType.Image]: ImagePanelV,

diff --git a/src/components/panels/slideshow-panel.vue b/src/components/panels/slideshow-panel.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Options, Prop, Vue } from 'vue-property-decorator';
 import { ConfigFileStructure, SlideshowPanel } from '@storylines/definitions';
 import { Hooper, Navigation as HooperNavigation, Pagination as HooperPagination, Slide } from 'hooper';
 import 'hooper/dist/hooper.css';
@@ -49,7 +49,7 @@ import MarkdownIt from 'markdown-it';
 import FullscreenV from '@storylines/components/panels/helpers/fullscreen.vue';
 import ImagePanelV from '@storylines/components/panels/image-panel.vue';
 
-@Component({
+@Options({
     components: {
         Hooper,
         Slide,

diff --git a/src/components/panels/text-panel.vue b/src/components/panels/text-panel.vue
@@ -12,10 +12,10 @@
 import Scrollama from 'vue-scrollama';
 import MarkdownIt from 'markdown-it';
 
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Options, Prop, Vue } from 'vue-property-decorator';
 import { TextPanel } from '@storylines/definitions';
 
-@Component({
+@Options({
     components: {
         Scrollama
     }

diff --git a/src/components/panels/video-panel.vue b/src/components/panels/video-panel.vue
@@ -75,9 +75,8 @@
 import MarkdownIt from 'markdown-it';
 
 import { VideoPanel } from '@storylines/definitions';
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import { Vue, Prop } from 'vue-property-decorator';
 
-@Component({})
 export default class VideoPanelV extends Vue {
     @Prop() config!: VideoPanel;
 

diff --git a/src/components/story/chapter-menu.vue b/src/components/story/chapter-menu.vue
@@ -148,10 +148,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Prop, Vue } from 'vue-property-decorator';
 import { Slide } from '@storylines/definitions';
 
-@Component
 export default class ChapterMenuV extends Vue {
     @Prop() slides!: Slide[];
     @Prop() activeChapterIndex!: number;

diff --git a/src/components/story/introduction.vue b/src/components/story/introduction.vue
@@ -75,9 +75,8 @@
 
 <script lang="ts">
 import { ConfigFileStructure, Intro } from '@storylines/definitions';
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Prop, Vue } from 'vue-property-decorator';
 
-@Component({})
 export default class IntroV extends Vue {
     @Prop() config!: Intro;
     @Prop() configFileStructure!: ConfigFileStructure;

diff --git a/src/components/story/mobile-menu.vue b/src/components/story/mobile-menu.vue
@@ -87,10 +87,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Prop, Vue } from 'vue-property-decorator';
 import { Slide } from '@storylines/definitions';
 
-@Component
 export default class SideMenuV extends Vue {
     @Prop() slides!: Slide[];
     @Prop() activeChapterIndex!: number;

diff --git a/src/components/story/slide.vue b/src/components/story/slide.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Options, Prop, Vue } from 'vue-property-decorator';
 import { ConfigFileStructure, PanelType, Slide } from '@storylines/definitions';
 import PanelV from '@storylines/components/panels/panel.vue';
 
-@Component({
+@Options({
     components: {
         panel: PanelV
     }

diff --git a/src/components/story/story-content.vue b/src/components/story/story-content.vue
@@ -26,13 +26,13 @@
 <script lang="ts">
 import 'intersection-observer';
 import Scrollama from 'vue-scrollama';
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Options, Prop, Vue } from 'vue-property-decorator';
 import { ConfigFileStructure, StoryRampConfig } from '@storylines/definitions';
 
 import ChapterMenuV from './chapter-menu.vue';
 import SlideV from './slide.vue';
 
-@Component({
+@Options({
     components: {
         Scrollama,
         ChapterMenuV,

diff --git a/src/components/story/story.vue b/src/components/story/story.vue
@@ -60,7 +60,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Options, Vue } from 'vue-property-decorator';
 import { Route } from 'vue-router';
 
 import MobileMenuV from './mobile-menu.vue';
@@ -70,7 +70,7 @@ import IntroV from '@storylines/components/story/introduction.vue';
 import { StoryRampConfig } from '@storylines/definitions';
 // import Circle2 from 'vue-loading-spinner/src/components/Circle2.vue';
 
-@Component({
+@Options({
     components: {
         StoryContentV,
         MobileMenuV,

diff --git a/src/router/componentHooks.ts b/src/router/componentHooks.ts
@@ -1,4 +1,4 @@
-import Component from 'vue-class-component';
+import { Vue } from 'vue-class-component';
 
 // register router hooks
-Component.registerHooks(['beforeRouterEnter', 'beforeRouteLeave', 'beforeRouteUpdate']);
+Vue.registerHooks(['beforeRouterEnter', 'beforeRouteLeave', 'beforeRouteUpdate']);