@worksafevictoria/wcl7.5 1.8.0-beta.17 → 1.8.0-beta.18

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/Paragraphs/ScrollSpy/index.stories.js +23 -25
  3. package/src/components/Paragraphs/ScrollSpy/index.vue +33 -40
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worksafevictoria/wcl7.5",
3
- "version": "1.8.0-beta.17",
3
+ "version": "1.8.0-beta.18",
4
4
  "main": "src/index.js",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/components/Paragraphs/ScrollSpy/index.stories.js CHANGED
@@ -4,40 +4,38 @@ import { BCol, BRow, BContainer } from 'bootstrap-vue-next'
4
4
  const englishItemList = [
5
5
  {
6
6
  text: 'Section one heading',
7
- id: 'item-1'
7
+ id: 'item-1',
8
8
  },
9
9
  {
10
10
  text: 'Section two heading spans over two lines',
11
- id: 'item-2'
11
+ id: 'item-2',
12
12
  },
13
13
  {
14
- text:
15
- 'Section three heading spans over three lines and is active yellow or green',
16
- id: 'item-3'
14
+ text: 'Section three heading spans over three lines and is active yellow or green',
15
+ id: 'item-3',
17
16
  },
18
17
  {
19
18
  text: 'Section four heading',
20
- id: 'item-4'
21
- }
19
+ id: 'item-4',
20
+ },
22
21
  ]
23
22
  const arabicItemList = [
24
23
  {
25
24
  text: 'عنوان القسم الأول',
26
- id: 'item-1'
25
+ id: 'item-1',
27
26
  },
28
27
  {
29
28
  text: 'يمتد عنوان القسم الثاني على سطرين',
30
- id: 'item-2'
29
+ id: 'item-2',
31
30
  },
32
31
  {
33
- text:
34
- 'يمتد عنوان القسم الثالث على ثلاثة أسطر ويكون نشطًا باللون الأصفر أو الأخضر',
35
- id: 'item-3'
32
+ text: 'يمتد عنوان القسم الثالث على ثلاثة أسطر ويكون نشطًا باللون الأصفر أو الأخضر',
33
+ id: 'item-3',
36
34
  },
37
35
  {
38
36
  text: 'عنوان الباب الرابع',
39
- id: 'item-4'
40
- }
37
+ id: 'item-4',
38
+ },
41
39
  ]
42
40
  export default {
43
41
  title: 'Paragraphs/ScrollSpy',
@@ -45,16 +43,16 @@ export default {
45
43
  tags: ['autodocs'],
46
44
  argTypes: {
47
45
  itemList: {
48
- table: {disable: true}
49
- }
46
+ table: { disable: true },
47
+ },
50
48
  },
51
49
  args: {
52
50
  title: 'On this page',
53
- itemListEnglish: englishItemList,
51
+ itemListEnglish: englishItemList,
54
52
  itemListArabic: arabicItemList,
55
53
  rtl: false,
56
- scrollSpy: { element: 'scrollspy-nested', offset: 100, method: 'auto' }
57
- }
54
+ scrollSpy: { element: 'scrollspy-nested', offset: 100, method: 'auto' },
55
+ },
58
56
  }
59
57
  const DefaultContent = (args) => ({
60
58
  components: { ScrollSpy, BCol, BRow, BContainer },
@@ -75,7 +73,7 @@ const DefaultContent = (args) => ({
75
73
  `,
76
74
  arabicText: `هنالك العديد من الأنواع المتوفرة لنصوص لوريم إيبسوم، ولكن الغالبية تم تعديلها بشكل ما عبر إدخال بعض النوادر أو الكلمات العشوائية إلى النص. إن كنت تريد أن تستخدم نص لوريم إيبسوم ما، عليك أن تتحقق أولاً أن ليس هناك أي كلمات أو عبارات محرجة أو غير لائقة مخبأة في هذا النص. بينما تعمل جميع مولّدات نصوص لوريم إيبسوم على الإنترنت على إعادة تكرار مقاطع من نص لوريم إيبسوم نفسه عدة مرات بما تتطلبه الحاجة، يقوم مولّدنا هذا باستخدام كلمات من قاموس يحوي على أكثر من 200 كلمة لا تينية، مضاف إليها مجموعة من الجمل النموذجية، لتكوين نص لوريم إيبسوم ذو شكل منطقي قريب إلى النص الحقيقي. وبالتالي يكون النص الناتح خالي من التكرار، أو أي كلمات أو عبارات غير لائقة أو ما شابه. وهذا ما يجعله أول مولّد نص لوريم إيبسوم حقيقي على الإنترنت.`,
77
75
  englishItemList,
78
- arabicItemList
76
+ arabicItemList,
79
77
  }
80
78
  },
81
79
  template: `
@@ -85,7 +83,7 @@ const DefaultContent = (args) => ({
85
83
  <div
86
84
  id="scrollspy-nested"
87
85
  >
88
- <h4 id="item-1">Section one heading</h4>
86
+ <h2 id="item-1">Section one heading</h2>
89
87
  <p>{{ text }}</p>
90
88
  <p>{{ text }}</p>
91
89
  <p>{{ text }}</p>
@@ -94,7 +92,7 @@ const DefaultContent = (args) => ({
94
92
  <p>{{ text }}</p>
95
93
  <p>{{ text }}</p>
96
94
  <p>{{ text }}</p>
97
- <h4 id="item-2">Section two heading spans over two lines</h4>
95
+ <h2 id="item-2">Section two heading spans over two lines</h2>
98
96
  <p>{{ text }}</p>
99
97
  <p>{{ text }}</p>
100
98
  <p>{{ text }}</p>
@@ -102,7 +100,7 @@ const DefaultContent = (args) => ({
102
100
  <p>{{ text }}</p>
103
101
  <p>{{ text }}</p>
104
102
  <p>{{ text }}</p>
105
- <h4 id="item-3">Section three heading spans over three lines and is active yellow or green</h4>
103
+ <h2 id="item-3">Section three heading spans over three lines and is active yellow or green</h2>
106
104
  <p>{{ text }}</p>
107
105
  <p>{{ text }}</p>
108
106
  <p>{{ text }}</p>
@@ -110,7 +108,7 @@ const DefaultContent = (args) => ({
110
108
  <p>{{ text }}</p>
111
109
  <p>{{ text }}</p>
112
110
  <p>{{ text }}</p>
113
- <h4 id="item-4">Section four heading</h4>
111
+ <h2 id="item-4">Section four heading</h2>
114
112
  <p>{{ text }}</p>
115
113
  <p>{{ text }}</p>
116
114
  <p>{{ text }}</p>
@@ -172,7 +170,7 @@ const DefaultContent = (args) => ({
172
170
  <scroll-spy v-bind="args" :item-list="args.arabicItemList" />
173
171
  </b-col>
174
172
  </b-row>
175
- </b-container>`
173
+ </b-container>`,
176
174
  })
177
175
 
178
176
  export const Default = DefaultContent.bind({})
package/src/components/Paragraphs/ScrollSpy/index.vue CHANGED
@@ -17,55 +17,48 @@
17
17
  </section-group>
18
18
  </template>
19
19
 
20
- <script>
20
+ <script setup>
21
21
  import SectionGroup from '../../Containers/SectionGroup/index.vue'
22
+ import { defineProps } from 'vue'
22
23
  import {
23
24
  BNavbar,
24
25
  BListGroup,
25
26
  BListGroupItem,
26
- vBScrollspy,
27
+ vBScrollspy as vBScrollspy,
27
28
  } from 'bootstrap-vue-next'
28
29
 
29
- export default {
30
- name: 'ScrollSpy',
31
- components: { SectionGroup, BNavbar, BListGroup, BListGroupItem },
32
- directives: { 'b-scrollspy': vBScrollspy },
33
- props: {
34
- title: {
35
- type: String,
36
- default: 'On this page',
37
- },
38
- itemList: {
39
- type: Array,
40
- required: true,
41
- },
42
- rtl: {
43
- type: Boolean,
44
- default: false,
45
- },
46
- scrollSpy: {
47
- type: Object,
48
- default: () => {
49
- return {
50
- element: 'body',
51
- offset: 100,
52
- method: 'auto',
53
- contentQuery: '[id]',
54
- }
55
- },
56
- },
30
+ const { title, itemList, rtl, scrollSpy } = defineProps({
31
+ title: {
32
+ type: String,
33
+ default: 'On this page',
57
34
  },
58
- methods: {
59
- scrollToAnchor(anchor) {
60
- const anchorElement = document.getElementById(anchor)
61
- if (anchorElement) {
62
- anchorElement.focus()
63
- anchorElement.scrollIntoView({
64
- behavior: 'smooth',
65
- })
66
- }
67
- },
35
+ itemList: {
36
+ type: Array,
37
+ required: true,
38
+ },
39
+ rtl: {
40
+ type: Boolean,
41
+ default: false,
42
+ },
43
+ scrollSpy: {
44
+ type: Object,
45
+ default: () => ({
46
+ element: 'body',
47
+ offset: 100,
48
+ method: 'auto',
49
+ contentQuery: 'h2[id]',
50
+ }),
68
51
  },
52
+ })
53
+
54
+ const scrollToAnchor = (anchor) => {
55
+ const anchorElement = document.getElementById(anchor)
56
+ if (anchorElement) {
57
+ anchorElement.focus()
58
+ anchorElement.scrollIntoView({
59
+ behavior: 'smooth',
60
+ })
61
+ }
69
62
  }
70
63
  </script>
71
64