@worksafevictoria/wcl7.5 1.9.0-beta.13 → 1.9.0-beta.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/Paragraphs/Tabs/index.vue +4 -4
  3. package/src/components/Paragraphs/TabulatedData/index.vue +18 -18
  4. package/src/components/SubComponents/VideoThumbnail/index.vue +30 -29
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worksafevictoria/wcl7.5",
3
- "version": "1.9.0-beta.13",
3
+ "version": "1.9.0-beta.14",
4
4
  "main": "src/index.js",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/components/Paragraphs/Tabs/index.vue CHANGED
@@ -13,8 +13,8 @@
13
13
  :class="`paragraph--tabs ${workwell ? 'workwell' : ''}`"
14
14
  >
15
15
  <template v-slot:cardItem>
16
- <b-tabs v-model="tabIndex">
17
- <b-tab
16
+ <BTabs v-model:index="tabIndex" card>
17
+ <BTab
18
18
  v-for="(item, index) in items"
19
19
  :key="`${index}-${$.uid}`"
20
20
  :title="item.title"
@@ -24,8 +24,8 @@
24
24
  :content="item.content.value"
25
25
  :without-container="true"
26
26
  />
27
- </b-tab>
28
- </b-tabs>
27
+ </BTab>
28
+ </BTabs>
29
29
  </template>
30
30
  </card-grid>
31
31
  <container v-else class="pdf-tabs">
package/src/components/Paragraphs/TabulatedData/index.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  :size="'content'"
6
6
  >
7
7
  <div :class="isFluid ? 'table-scrolled' : ''">
8
- <b-table
8
+ <BTable
9
9
  v-if="items"
10
10
  :items="items"
11
11
  :fields="fields"
@@ -46,20 +46,20 @@
46
46
  <template #cell()="data">
47
47
  <rich-text :content="data.value" />
48
48
  </template>
49
- </b-table>
49
+ </BTable>
50
50
  </div>
51
51
  </section-group>
52
52
  </template>
53
53
 
54
54
  <script>
55
- import SectionGroup from "./../../Containers/SectionGroup/index.vue";
56
- import RichText from "../../Paragraphs/RichText/index.vue";
57
- import { BTable } from "bootstrap-vue-next";
58
- import CaretUp from "./../../../assets/icons/caret-up.svg?url";
59
- import CaretDown from "./../../../assets/icons/caret-down.svg?url";
55
+ import SectionGroup from './../../Containers/SectionGroup/index.vue'
56
+ import RichText from '../../Paragraphs/RichText/index.vue'
57
+ import { BTable } from 'bootstrap-vue-next'
58
+ import CaretUp from './../../../assets/icons/caret-up.svg?url'
59
+ import CaretDown from './../../../assets/icons/caret-down.svg?url'
60
60
 
61
61
  export default {
62
- name: "TabulatedData",
62
+ name: 'TabulatedData',
63
63
  components: { SectionGroup, RichText, BTable },
64
64
  props: {
65
65
  items: {
@@ -80,7 +80,7 @@ export default {
80
80
  },
81
81
  caption: {
82
82
  type: String,
83
- default: "",
83
+ default: '',
84
84
  required: false,
85
85
  },
86
86
  sortBy: {
@@ -91,33 +91,33 @@ export default {
91
91
  },
92
92
  data() {
93
93
  return {
94
- newSortBy: this.sortBy ? [{ key: this.sortBy, order: "asc" }] : [],
94
+ newSortBy: this.sortBy ? [{ key: this.sortBy, order: 'asc' }] : [],
95
95
  //sortDesc: false,
96
96
  CaretUp,
97
97
  CaretDown,
98
- };
98
+ }
99
99
  },
100
100
  computed: {
101
101
  isFluid() {
102
- return this.isFixedWidth;
102
+ return this.isFixedWidth
103
103
  },
104
104
  },
105
105
  methods: {
106
106
  accessSort(fieldVar) {
107
- const currentSort = fieldVar.thAttr["aria-sort"];
108
- if (currentSort === "ascending") {
109
- this.newSortBy = [{ key: fieldVar.key, order: "desc" }];
107
+ const currentSort = fieldVar.thAttr['aria-sort']
108
+ if (currentSort === 'ascending') {
109
+ this.newSortBy = [{ key: fieldVar.key, order: 'desc' }]
110
110
  } else {
111
- this.newSortBy = [{ key: fieldVar.key, order: "asc" }];
111
+ this.newSortBy = [{ key: fieldVar.key, order: 'asc' }]
112
112
  }
113
113
  },
114
114
  },
115
- };
115
+ }
116
116
  </script>
117
117
 
118
118
  <style lang="scss">
119
119
  .paragraph--tabulated-data {
120
- @import "../../../includes/scss/all";
120
+ @import '../../../includes/scss/all';
121
121
 
122
122
  .section-group__block {
123
123
  margin-top: -32px;
package/src/components/SubComponents/VideoThumbnail/index.vue CHANGED
@@ -17,15 +17,16 @@
17
17
  </div>
18
18
  </a>
19
19
  <!-- Modal -->
20
- <b-modal
21
- :id="`wcl-video-modal-${video.id}`"
20
+ <BModal
21
+ v-if="showModal"
22
22
  v-model="showModal"
23
+ :id="`wcl-video-modal-${video.id}`"
23
24
  scrollable
24
25
  class="wcl-video-modal__modal"
25
26
  no-footer
26
27
  size="xl"
27
28
  >
28
- <div class="wcl-video-modal__video" v-if="showModal">
29
+ <div class="wcl-video-modal__video">
29
30
  <video-media
30
31
  :media-title="video.mediaTitle"
31
32
  :media-description="video.mediaDescription"
@@ -38,23 +39,23 @@
38
39
  />
39
40
  </div>
40
41
  <template #footer><div></div></template>
41
- </b-modal>
42
+ </BModal>
42
43
  </div>
43
44
  </template>
44
45
 
45
46
  <script>
46
- import VideoMedia from "./../../Paragraphs/VideoPlayer/index.vue";
47
- import VideoPlay from "./../../../assets/icons/video-play.svg?url";
48
- import IconClose from "./../../../assets/icons/icon-close.svg?url";
49
- import { BModal } from "bootstrap-vue-next";
50
- import axios from "axios";
47
+ import VideoMedia from './../../Paragraphs/VideoPlayer/index.vue'
48
+ import VideoPlay from './../../../assets/icons/video-play.svg?url'
49
+ import IconClose from './../../../assets/icons/icon-close.svg?url'
50
+ import { BModal } from 'bootstrap-vue-next'
51
+ import axios from 'axios'
51
52
 
52
53
  export default {
53
- name: "VideoThumbnail",
54
+ name: 'VideoThumbnail',
54
55
  components: {
55
56
  VideoMedia,
56
57
  IconClose,
57
- "b-modal": BModal,
58
+ 'b-modal': BModal,
58
59
  },
59
60
  props: {
60
61
  video: {
@@ -67,42 +68,42 @@ export default {
67
68
  VideoPlay,
68
69
  IconClose,
69
70
  showModal: false,
70
- videoThumbnail: "",
71
- };
71
+ videoThumbnail: '',
72
+ }
72
73
  },
73
74
  mounted() {
74
- this.getVideoThumbnail();
75
+ this.getVideoThumbnail()
75
76
  },
76
77
  methods: {
77
78
  async getVideoThumbnail(url) {
78
79
  try {
79
- if (this.video.provider === "youtube") {
80
- this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/maxresdefault.jpg`;
81
- const response = await axios.head(this.videoThumbnail);
80
+ if (this.video.provider === 'youtube') {
81
+ this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/maxresdefault.jpg`
82
+ const response = await axios.head(this.videoThumbnail)
82
83
  if (response.status === 200) {
83
84
  } else {
84
- this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`;
85
+ this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`
85
86
  }
86
- } else if (this.video.provider === "vimeo") {
87
+ } else if (this.video.provider === 'vimeo') {
87
88
  let thumbnail = await axios.get(
88
- `https://vimeo.com/api/v2/video/${this.video.id}.json`
89
- );
89
+ `https://vimeo.com/api/v2/video/${this.video.id}.json`,
90
+ )
90
91
  if (thumbnail.data) {
91
- this.videoThumbnail = thumbnail.data[0].thumbnail_large;
92
+ this.videoThumbnail = thumbnail.data[0].thumbnail_large
92
93
  }
93
94
  }
94
95
  } catch (error) {
95
96
  if (error.response && error.response.status === 404) {
96
- this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`;
97
+ this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`
97
98
  } else {
98
99
  }
99
100
  }
100
101
  },
101
102
  },
102
- };
103
+ }
103
104
  </script>
104
105
  <style lang="scss" scoped>
105
- @import "../../../includes/scss/all";
106
+ @import '../../../includes/scss/all';
106
107
  // Outside wrapper style
107
108
  .wcl-video-thumbnail-wrapper {
108
109
  margin-bottom: 32px;
@@ -128,17 +129,17 @@ export default {
128
129
  left: 50%;
129
130
  //height: 68px;
130
131
  //width: 68px;
131
- @include fp("height", 65, 68);
132
- @include fp("width", 65, 68);
132
+ @include fp('height', 65, 68);
133
+ @include fp('width', 65, 68);
133
134
  -ms-transform: translate(-50%, -50%);
134
135
  transform: translate(-50%, -50%);
135
136
 
136
- @include mq("sm") {
137
+ @include mq('sm') {
137
138
  height: 80px;
138
139
  width: 80px;
139
140
  }
140
141
 
141
- @include mq("xs") {
142
+ @include mq('xs') {
142
143
  height: 64px;
143
144
  width: 64px;
144
145
  }