Merge pull request #157 from bcgov/vue3

bcgov · May 6, 2022 · afc3c65 · afc3c65
2 parents 88b7f50 + 282e762
commit afc3c65
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 107 deletions.
diff --git a/src/components/ContentModal.vue b/src/components/ContentModal.vue
@@ -1,26 +1,44 @@
 <template>
-  <div class="modal fade show"
+  <div
+    ref="modal"
+    class="modal fade show"
     tabindex="-1"
     aria-labelledby="modal-title"
     aria-modal="true"
     role="dialog"
-    ref="modal"
-    @click="handleClickBackground()">
-    <div :class="`modal-dialog ${!!size ? 'modal-' + size : ''}`"
-      @click="stopPropagation($event)">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title"
-            id="modal-title">{{title}}</h5>
-          <button v-if="isCloseButtonShown"
+    @click="handleClickBackground()"
+  >
+    <div
+      :class="`modal-dialog ${!!size ? 'modal-' + size : ''}`"
+      @click="stopPropagation($event)"
+    >
+      <div
+        class="modal-content"
+      >
+        <div
+          class="modal-header"
+        >
+          <h5
+            id="modal-title"
+            class="modal-title"
+          >
+            {{ title }}
+          </h5>
+          <button
+            v-if="isCloseButtonShown"
             type="button"
             class="close"
             aria-label="Close"
-            @click="handleClose()">
-            <span aria-hidden="true">&times;</span>
+            @click="handleClose()"
+          >
+            <span
+              aria-hidden="true"
+            >&times;</span>
           </button>
         </div>
-        <div class="modal-body">
+        <div
+          class="modal-body"
+        >
           <slot>Content Here</slot>
         </div>
       </div>
@@ -33,7 +51,9 @@ import cypressMixin from "../mixins/cypress-mixin.js"
 
 export default {
   name: "ContentModal",
-  mixins: [ cypressMixin ],
+  mixins: [
+    cypressMixin, 
+  ],
   props: {
     title: {
       type: String,
@@ -43,8 +63,13 @@ export default {
       type: String,
       default: '',
       validator: (value) => {
-        return ['', 'sm', 'lg', 'xl'].includes(value);
-      }
+        return [
+          '',
+          'sm',
+          'lg',
+          'xl',
+        ].includes(value);
+      },
     },
     className: {
       type: String,
@@ -57,11 +82,15 @@ export default {
     closeOnBackgroundClick: {
       type: Boolean,
       default: true,
-    }
+    },
   },
+  emits: [
+    'close',
+  ],
   data: () => {
     return {
-      focusableEls: [],
+      focusableEls: [
+      ],
       focusedEl: null,
       contentObserver: null,
     };
@@ -80,7 +109,7 @@ export default {
     const observerConfig = {
       attributes: true,
       childList: true,
-      subtree: true
+      subtree: true,
     };
     this.contentObserver = new MutationObserver(this.handleContentChange);
     this.contentObserver.observe(this.$refs.modal, observerConfig);

diff --git a/src/components/ContinueBar.vue b/src/components/ContinueBar.vue
@@ -1,16 +1,24 @@
 <template>
-  <div :class='componentClass'>
-    <div class="d-flex flex-wrap justify-content-end p-3 container">
-      <Button v-if="hasSecondaryButton"
-              :className="'secondary-button'"
-              :color="'gold'"
-              :label='secondaryButtonLabel'
-              :data-cy="getCypressValue()"
-              @click='onSecondaryClick()'/>
-      <Button :label='buttonLabel'
-              :hasLoader='hasLoader'
-              :data-cy="getCypressValue()"
-              @click='onContinue()'/>
+  <div
+    :class="componentClass"
+  >
+    <div
+      class="d-flex flex-wrap justify-content-end p-3 container"
+    >
+      <Button
+        v-if="hasSecondaryButton"
+        :class-name="'secondary-button'"
+        :color="'gold'"
+        :label="secondaryButtonLabel"
+        :data-cy="getCypressValue()"
+        @click="onSecondaryClick()"
+      />
+      <Button
+        :label="buttonLabel"
+        :has-loader="hasLoader"
+        :data-cy="getCypressValue()"
+        @click="onContinue()"
+      />
     </div>
   </div>
 </template>
@@ -22,21 +30,23 @@ import cypressMixin from "../mixins/cypress-mixin.js"
 export default {
   name: 'ContinueBar',
   components: {
-    Button
+    Button,
   },
-  mixins: [ cypressMixin ],
+  mixins: [
+    cypressMixin, 
+  ],
   props: {
     hasLoader: {
       type: Boolean,
-      default: false
+      default: false,
     },
     hasSecondaryButton: {
       type: Boolean,
-      default: false
+      default: false,
     },
     buttonLabel: {
       type: String,
-      default: 'Continue'
+      default: 'Continue',
     },
     secondaryButtonLabel: {
       type: String,
@@ -46,19 +56,23 @@ export default {
       default: true,
     },
   },
+  emits: [
+    'continue',
+    'secondary',
+  ],
+  computed: {
+    componentClass() {
+      return `continue-bar ${this.isSticky ? 'sticky' : ''}`;
+    },
+  },
   methods: {
     onContinue() {
       this.$emit('continue');
     },
     onSecondaryClick() {
       this.$emit('secondary');
-    }
+    },
   },
-  computed: {
-    componentClass() {
-      return `continue-bar ${this.isSticky ? 'sticky' : ''}`;
-    }
-  }
 };
 </script>