Add GCol wrapper for BCol

client/src/component-library/GCol.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { BCol } from "bootstrap-vue";
+</script>
+
+<template>
+    <BCol v-bind="$attrs" v-on="$listeners"> </BCol>
+</template>

client/src/components/Common/ExportForm.vue

@@ -11,22 +11,24 @@
             <GInput id="name" v-model="name" :placeholder="namePlaceholder | localize" required />
         </b-form-group>
         <b-row align-h="end">
-            <b-col
-                ><b-button class="export-button" variant="primary" :disabled="!canExport" @click.prevent="doExport">{{
-                    exportButtonText | localize
-                }}</b-button></b-col
-            >
+            <GCol>
+                <b-button class="export-button" variant="primary" :disabled="!canExport" @click.prevent="doExport">
+                    {{ exportButtonText | localize }}
+                </b-button>
+            </GCol>
         </b-row>
     </div>
 </template>
 
 <script>
 import GInput from "component-library/GInput";
 
+import GCol from "@/component-library/GCol.vue";
 import FilesInput from "components/FilesDialog/FilesInput.vue";
 
 export default {
     components: {
+        GCol,
         FilesInput,
         GInput,
     },

client/src/components/Form/Elements/FormColor.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import GCol from "@/component-library/GCol.vue";
 import GInput from "@/component-library/GInput.vue";
 
 export interface FormColorProps {
@@ -28,12 +29,12 @@ const currentValue = computed({
 
 <template>
     <b-row>
-        <b-col class="form-color-input">
+        <GCol class="form-color-input">
             <GInput :id="id" v-model="currentValue" class="cursor-pointer" type="color" size="sm" />
-        </b-col>
-        <b-col class="pl-0">
+        </GCol>
+        <GCol class="pl-0">
             <label class="pt-1 cursor-pointer" :for="id">Select a color</label>
-        </b-col>
+        </GCol>
     </b-row>
 </template>
 

client/src/components/Form/Elements/FormNumber.vue

@@ -4,7 +4,7 @@
             {{ errorMessage }}
         </GAlert>
         <b-row align-v="center">
-            <b-col :sm="isRangeValid ? defaultInputSizeWithSlider : false">
+            <GCol :sm="isRangeValid ? defaultInputSizeWithSlider : false">
                 <!-- regular dot and dot on numpad have different codes -->
                 <GInput
                     v-model="currentValue"
@@ -15,10 +15,10 @@
                     @change="onInputChange"
                     @keydown.190.capture="onFloatInput"
                     @keydown.110.capture="onFloatInput" />
-            </b-col>
-            <b-col v-if="isRangeValid" class="pl-0">
+            </GCol>
+            <GCol v-if="isRangeValid" class="pl-0">
                 <GInput v-model="currentValue" :min="min" :max="max" :step="step" type="range" />
-            </b-col>
+            </GCol>
         </b-row>
     </div>
 </template>
@@ -27,8 +27,11 @@
 import GAlert from "component-library/GAlert";
 import GInput from "component-library/GInput";
 
+import GCol from "@/component-library/GCol.vue";
+
 export default {
     components: {
+        GCol,
         GAlert,
         GInput,
     },

client/src/components/Form/Elements/FormText.vue

@@ -1,6 +1,6 @@
 <template>
     <b-row align-v="center">
-        <b-col>
+        <GCol>
             <b-form-textarea
                 v-if="inputArea"
                 :id="id"
@@ -22,15 +22,18 @@
             <datalist v-if="datalist && !inputArea" :id="`${id}-datalist`">
                 <option v-for="data in datalist" :key="data.value" :label="data.label" :value="data.value" />
             </datalist>
-        </b-col>
+        </GCol>
     </b-row>
 </template>
 
 <script>
 import GInput from "component-library/GInput";
 
+import GCol from "@/component-library/GCol.vue";
+
 export default {
     components: {
+        GCol,
         GInput,
     },
     props: {

client/src/components/IconCard.vue

@@ -2,19 +2,24 @@
     <b-card :title="title" class="mx-4 icon-card">
         <b-container class="p-0">
             <b-row>
-                <b-col>{{ description }}</b-col>
-                <b-col cols="auto"><i :class="icon"></i></b-col>
+                <GCol>{{ description }}</GCol>
+                <GCol cols="auto"><i :class="icon"></i></GCol>
             </b-row>
         </b-container>
         <b-button variant="primary" @click="onButtonClick">{{ buttonText }}</b-button>
     </b-card>
 </template>
 
 <script>
+import GCol from "@/component-library/GCol.vue";
+
 /** A generic Card, used as a template, that displays an action button,
  * an icon (font-awesome), along with a title and description.
  * Clicking the button emits an "onButtonClick" event. */
 export default {
+    components: {
+        GCol,
+    },
     props: {
         title: {
             type: String,

client/src/components/InteractiveTools/InteractiveTools.vue

@@ -3,7 +3,7 @@
         <GAlert v-for="(message, index) in messages" :key="index" :show="3" variant="danger">{{ message }}</GAlert>
         <h1 id="interactive-tools-heading" class="h-lg">Active Interactive Tools</h1>
         <b-row class="mb-3">
-            <b-col cols="6">
+            <GCol cols="6">
                 <b-input
                     id="interactivetool-search"
                     v-model="filter"
@@ -12,7 +12,7 @@
                     placeholder="Search Interactive Tool"
                     autocomplete="off"
                     type="text" />
-            </b-col>
+            </GCol>
         </b-row>
         <b-table
             id="interactive-tool-table"
@@ -76,11 +76,13 @@ import { useEntryPointStore } from "../../stores/entryPointStore";
 import { Services } from "./services";
 
 import GAlert from "@/component-library/GAlert.vue";
+import GCol from "@/component-library/GCol.vue";
 
 library.add(faExternalLinkAlt);
 
 export default {
     components: {
+        GCol,
         GAlert,
         UtcDate,
         FontAwesomeIcon,

client/src/components/JobInformation/CodeRow.vue

@@ -10,12 +10,12 @@
         </td>
         <td v-if="codeItem">
             <b-row align-v="center">
-                <b-col cols="11">
+                <GCol cols="11">
                     <pre :class="codeClass">{{ codeItem }}</pre>
-                </b-col>
-                <b-col class="nopadding pointer">
+                </GCol>
+                <GCol class="nopadding pointer">
                     <font-awesome-icon :icon="iconClass" />
-                </b-col>
+                </GCol>
             </b-row>
         </td>
         <td v-else><i>empty</i></td>
@@ -26,9 +26,12 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCompressAlt, faExpandAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
+import GCol from "@/component-library/GCol.vue";
+
 library.add(faCompressAlt, faExpandAlt);
 export default {
     components: {
+        GCol,
         FontAwesomeIcon,
     },
     props: {

client/src/components/Libraries/LibrariesList.vue

@@ -147,15 +147,15 @@
 
         <b-container>
             <b-row class="justify-content-md-center">
-                <b-col md="auto">
+                <GCol md="auto">
                     <b-pagination
                         v-model="currentPage"
                         :total-rows="rows"
                         :per-page="perPage"
                         aria-controls="libraries_list">
                     </b-pagination>
-                </b-col>
-                <b-col cols="1.5">
+                </GCol>
+                <GCol cols="1.5">
                     <table>
                         <tr>
                             <td class="m-0 p-0">
@@ -174,7 +174,7 @@
                             </td>
                         </tr>
                     </table>
-                </b-col>
+                </GCol>
             </b-row>
         </b-container>
     </div>
@@ -199,6 +199,7 @@ import { useUserStore } from "@/stores/userStore";
 import { Services } from "./services";
 import { fields } from "./table-fields";
 
+import GCol from "@/component-library/GCol.vue";
 import GInputGroup from "@/component-library/GInputGroup.vue";
 import GLink from "@/component-library/GLink.vue";
 
@@ -208,6 +209,7 @@ Vue.use(BootstrapVue);
 
 export default {
     components: {
+        GCol,
         GInputGroup,
         GLink,
         FontAwesomeIcon,

client/src/components/Libraries/LibraryFolder/LibraryFolder.vue

@@ -221,7 +221,7 @@
         <!-- hide pagination if the table is loading-->
         <b-container>
             <b-row align-v="center" class="justify-content-md-center">
-                <b-col md="auto">
+                <GCol md="auto">
                     <div v-if="isBusy">
                         <b-spinner small type="grow"></b-spinner>
                         <b-spinner small type="grow"></b-spinner>
@@ -235,9 +235,9 @@
                         aria-controls="folder_list_body"
                         @input="changePage">
                     </b-pagination>
-                </b-col>
+                </GCol>
 
-                <b-col cols="1.5">
+                <GCol cols="1.5">
                     <table>
                         <tr>
                             <td class="m-0 p-0">
@@ -253,7 +253,7 @@
                             </td>
                         </tr>
                     </table>
-                </b-col>
+                </GCol>
             </b-row>
         </b-container>
     </div>
@@ -280,6 +280,7 @@ import { Services } from "./services";
 import { fields } from "./table-fields";
 import FolderTopBar from "./TopToolbar/FolderTopBar";
 
+import GCol from "@/component-library/GCol.vue";
 import GLink from "@/component-library/GLink.vue";
 
 initFolderTableIcons();
@@ -298,6 +299,7 @@ function initialFolderState() {
 }
 export default {
     components: {
+        GCol,
         GLink,
         FolderTopBar,
         UtcDate,

client/src/components/Libraries/LibraryPermissions/PermissionsInputField.vue

@@ -4,7 +4,7 @@
             {{ title }}
         </h2>
         <b-row>
-            <b-col>
+            <GCol>
                 <div v-if="options && value" :class="permission_type">
                     <multiselect
                         v-model="value"
@@ -24,12 +24,12 @@
                         </template>
                     </multiselect>
                 </div>
-            </b-col>
-            <b-col>
+            </GCol>
+            <GCol>
                 <GAlert show variant="info">
                     <div v-html="alert" />
                 </GAlert>
-            </b-col>
+            </GCol>
         </b-row>
     </div>
 </template>
@@ -43,10 +43,12 @@ import Multiselect from "vue-multiselect";
 import VueObserveVisibility from "vue-observe-visibility";
 
 import GAlert from "@/component-library/GAlert.vue";
+import GCol from "@/component-library/GCol.vue";
 
 Vue.use(VueObserveVisibility);
 export default {
     components: {
+        GCol,
         GAlert,
         Multiselect,
     },

client/src/components/NewUserWelcome/NewUserWelcome.vue

@@ -28,7 +28,7 @@
     </div>
 </template>
 <script>
-import { BButton, BCard, BCardGroup, BCarousel, BCarouselSlide, BCol, BRow, BTab, BTabs } from "bootstrap-vue";
+import { BButton, BCard, BCardGroup, BCarousel, BCarouselSlide, BRow, BTab, BTabs } from "bootstrap-vue";
 import Heading from "components/Common/Heading";
 import Slides from "components/NewUserWelcome/components/Slides";
 import Subtopics from "components/NewUserWelcome/components/Subtopics";
@@ -38,6 +38,8 @@ import { getAppRoot } from "onload/loadConfig";
 
 import { getResource } from "./getResource";
 
+import GCol from "@/component-library/GCol.vue";
+
 export default {
     components: {
         Heading,
@@ -49,7 +51,7 @@ export default {
         BCarouselSlide,
         BButton,
         BRow,
-        BCol,
+        GCol,
         Topics,
         Subtopics,
         Slides,