@icvdeveloper/common-module 2.0.0 → 2.1.1

package/dist/runtime/components/media/components/ContentTabs.vue

@@ -52,7 +52,7 @@ const hasAgendaTab = computed((): boolean => {
 });
 
 const selectedTabClass = computed((): string => {
-  return props.classObject.selectedTab;
+  return props.classObject.selectedTab as string;
 });
 
 // methods
@@ -61,7 +61,7 @@ const tabToggle = () => {
 };
 
 const showItem = (_index: number) => {
-  let clickedItem = items.value[_index];
+  const clickedItem = items.value[_index];
 
   if (clickedItem.type === SelectedContent.URL) {
     window.open(clickedItem.content);
@@ -75,9 +75,6 @@ onMounted(() => {
     selectedContent.value = items.value[0];
   }
 });
-
-// ...mapState("playerConfig"),
-// ...mapState(["agendaAlias"])
 </script>
 
 <template>
@@ -133,8 +130,9 @@ onMounted(() => {
                 'primary-link inline-block py-2 px-1 cursor-pointer'
               )
             "
-            >{{ agendaAlias }}</nuxt-link
           >
+            {{ agendaAlias }}
+          </nuxt-link>
         </li>
       </ul>
     </div>
@@ -148,7 +146,10 @@ onMounted(() => {
       <div
         :class="classBinding(classObject, 'mobileButtonContainer', 'p-1 block')"
       >
-        <button class="flex items-center px-3 py-2 mx-auto" @click="tabToggle">
+        <button
+          class="flex items-center px-3 py-2 mx-auto"
+          @click="tabToggle"
+        >
           <svg
             class="fill-current h-3 w-3"
             viewBox="0 0 20 20"
@@ -219,8 +220,9 @@ onMounted(() => {
                   'primary-link inline-block py-2 px-2 cursor-pointer'
                 )
               "
-              >{{ agendaAlias }}</nuxt-link
             >
+              {{ agendaAlias }}
+            </nuxt-link>
           </li>
         </ul>
       </div>
@@ -228,18 +230,17 @@ onMounted(() => {
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .tab-items {
-  @apply mr-1 flex-1;
-}
-@screen sm {
-  .tab-items {
-    @apply flex-initial;
-  }
+  @apply mr-1 flex-1 sm:flex-initial;
 }
 
 .active {
-  background: linear-gradient(0deg, rgb(80, 80, 80) 0%, rgb(180, 180, 180) 100%);
+  background: linear-gradient(
+    0deg,
+    rgba(80, 80, 80, 1) 0%,
+    rgba(180, 180, 180, 1) 100%
+  );
   color: white;
   font-weight: bold;
 }
@@ -247,20 +248,31 @@ onMounted(() => {
 .tab-bar {
   @apply flex flex-wrap;
   background: rgb(226, 226, 226);
-  background: linear-gradient(0deg, rgb(226, 226, 226) 0%, rgb(244, 244, 244) 100%);
-}
-.tab-bar .close {
-  @apply block flex flex-1 justify-end;
-}
-.tab-bar .close:hover {
-  filter: opacity(0.7);
+  background: linear-gradient(
+    0deg,
+    rgba(226, 226, 226, 1) 0%,
+    rgba(244, 244, 244, 1) 100%
+  );
+
+  .close {
+    @apply block flex flex-1 justify-end;
+
+    &:hover {
+      filter: opacity(0.7);
+    }
+  }
 }
 
 .tab-bar .item {
   display: block;
   float: left;
-}
-.tab-bar .item:hover {
-  background: linear-gradient(0deg, rgb(180, 180, 180) 0%, rgb(220, 220, 220) 100%);
+
+  &:hover {
+    background: linear-gradient(
+      0deg,
+      rgba(180, 180, 180, 1) 0%,
+      rgba(220, 220, 220, 1) 100%
+    );
+  }
 }
 </style>

package/dist/runtime/components/media/components/DocumentsPanel.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { toRefs, computed } from "vue";
-import { Presentation } from "../../../models/conference";
+import { useClassBinding } from "../../../composables/useClassBinding";
+import type { Presentation } from "../../../models/conference";
 import type { Document } from "../../../models/document";
 import type { DocumentsPanelClassObj } from "../../../@types/components";
-import { useClassBinding } from "../../../composables/useClassBinding";
 
 type Props = {
   presentation: Presentation;
@@ -52,10 +52,10 @@ const documentArray = computed((): Array<Document> | null => {
           index == documentArray.length - 1
             ? classBinding(classObject, 'lastElement', 'py-2')
             : classBinding(
-                classObject,
-                'listElement',
-                'py-2 border-b-2 contrast-border'
-              ),
+              classObject,
+              'listElement',
+              'py-2 border-b-2 contrast-border'
+            ),
         ]"
       >
         <!-- fix file image -->
@@ -108,19 +108,21 @@ const documentArray = computed((): Array<Document> | null => {
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .document-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 10px;
-}
-.document-grid .grid-item {
-  display: inline-block;
-  align-items: center;
-  align-self: center;
-}
-.document-grid .grid-item a:hover {
-  text-decoration: underline;
+
+  .grid-item {
+    display: inline-block;
+    align-items: center;
+    align-self: center;
+
+    a:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 .icon {

package/dist/runtime/components/media/components/MediaContainer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { inject, ref, toRefs } from "vue";
+import { ref, toRefs } from "vue";
 import type { Conference, Presentation } from "../../../models/conference";
 import type {
   MediaContainerClassObj,
@@ -56,7 +56,7 @@ const { currentStreamData, currentPresentation } = useStream(
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .media-container {
   display: grid;
   grid-template-columns: var(--media-template-columns-default);
@@ -70,9 +70,9 @@ const { currentStreamData, currentPresentation } = useStream(
   display: grid;
 }
 
-@screen lg {
-  img.normal {
-    max-height: 65vh;
+img.normal {
+  @screen lg {
+    max-height: 65vh; /* max height before distorting container */
   }
 }
 
@@ -93,12 +93,14 @@ const { currentStreamData, currentPresentation } = useStream(
   .media-container {
     grid-template-columns: var(--media-template-columns-large);
   }
+
   .expand-overlay {
     @apply p-2;
     display: block;
-  }
-  .expand-overlay:hover {
-    opacity: 0.7;
+
+    &:hover {
+      opacity: 0.7;
+    }
   }
 }
 </style>

package/dist/runtime/components/media/components/OverviewPanel.vue

@@ -42,8 +42,11 @@ const sessionOverview = computed((): string | null => {
       v-if="sessionOverview"
       :class="classBinding(classObject, 'htmlElement', '')"
       v-html="sessionOverview"
-    ></span>
-    <p v-else :class="classBinding(classObject, 'noOverviewElement', '')">
+    />
+    <p
+      v-else
+      :class="classBinding(classObject, 'noOverviewElement', '')"
+    >
       There is no overview for this presentation.
     </p>
   </div>

package/dist/runtime/components/media/components/PresentersPanel.vue

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-import { ref, toRefs, computed, provide } from "vue";
+import { toRefs, computed, provide } from "vue";
 import { sortBy } from "lodash-es";
 import { Position } from "../../../enums/general";
 import type {
   Presentation,
-  Presenter,
-  PresenterWithPivot,
+  Presenter
 } from "../../../models/conference";
 
 type Props = {
@@ -21,7 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
   isCompact: true,
 });
 
-const { presentation, itemWidth, layoutFormat, isCompact } = toRefs(props);
+const { presentation, isCompact } = toRefs(props);
 
 // provided values
 provide("itemWidth", "120");
@@ -41,7 +40,7 @@ const presenterArray = computed((): Presenter[] => {
           return presenter.last_name;
         }
       );
-    };
+    }
   return returnArray;
 });
 </script>
@@ -49,7 +48,7 @@ const presenterArray = computed((): Presenter[] => {
 <template>
   <div>
     <template v-if="presenterArray && presenterArray.length > 0">
-      <CommonPresenterListing 
+      <CommonPresenterListing
         v-for="(presenter, index) in presenterArray"
         :key="index"
         :presenter="presenter"
@@ -71,14 +70,15 @@ const presenterArray = computed((): Presenter[] => {
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .presenter-grid {
   display: grid;
   grid-template-columns: 100px 1fr;
   gap: 10px;
-}
-.presenter-grid .grid-item {
-  align-items: center;
-  align-self: center;
+
+  .grid-item {
+    align-items: center;
+    align-self: center;
+  }
 }
 </style>

package/dist/runtime/components/media/components/SponsorsPanel.vue

@@ -107,7 +107,7 @@ watch(presentation.value, (_newPresentation: Presentation) => {
               :class="
                 classBinding(classObject, 'sponsorImage', 'block mx-auto')
               "
-            />
+            >
           </a>
         </div>
       </div>
@@ -162,7 +162,7 @@ watch(presentation.value, (_newPresentation: Presentation) => {
             <img
               :src="sponsor.photo"
               :class="classBinding(classObject, 'trackImage', 'block mx-auto')"
-            />
+            >
           </a>
         </div>
       </div>
@@ -170,7 +170,7 @@ watch(presentation.value, (_newPresentation: Presentation) => {
     <div
       v-if="
         (sponsorsArray == undefined && trackSponsorsArray == undefined) ||
-        (!sponsorsArray?.length && !trackSponsorsArray?.length)
+          (!sponsorsArray?.length && !trackSponsorsArray?.length)
       "
       :class="
         classBinding(
@@ -195,15 +195,16 @@ watch(presentation.value, (_newPresentation: Presentation) => {
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .sponsor-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 10px;
-}
-.sponsor-grid .grid-item {
-  align-items: center;
-  align-self: center;
-  justify-self: center;
+
+  .grid-item {
+    align-items: center;
+    align-self: center;
+    justify-self: center;
+  }
 }
 </style>

package/dist/runtime/components/presenters/PresenterListing.vue

@@ -171,20 +171,18 @@ const handleClick = () => {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .new-line:before {
-  content: "\a";
+  content: "\a ";
   white-space: pre;
 }
-
 .no-new-line:before {
   content: " - ";
   white-space: normal;
 }
-
 @media (max-width: 1023px) {
   .new-line-responsive:before {
-    content: "\a";
+    content: "\a ";
     white-space: pre;
   }
 }

package/dist/runtime/components/presenters/Presenters.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { toRefs, computed } from "vue";
-import { sortBy, get } from "lodash-es";
-import type { Presenter, PresenterWithPivot } from "../../models/conference";
-import type { PresenterPageConfigs } from "../../models/virtualPagesConfig";
+import { toRefs, computed } from 'vue';
+import { sortBy, get } from 'lodash-es';
+import type { Presenter, PresenterWithPivot } from '../../models/conference';
+import type { PresenterPageConfigs } from '../../models/pagesConfig';
 
 // TODO - define presentersByLevel and presenterConfig type
 // TODO - create a helper function that formats Presenter[] to { 'presenters_all': Presenter[] }
@@ -37,7 +37,7 @@ const {
 
 // computed
 const presenterContainerClass = computed((): string => {
-  let classString: string = '';
+  let classString: string;
 
   switch (presFormat.value) {
     case 'grid':
@@ -82,7 +82,7 @@ const getSortedPresenters = (_level: number) => {
   const _slug: string = (_level == 0) ? 'presenters_all' : `presenters_level_${_level}`;
   const sortedPresenters = (presenters.value?.[_slug]) ? presenters.value[_slug] : [];
   sortedPresenters.forEach((pres: PresenterWithPivot) => {
-    if (pres?.pivot?.role && get(pres, 'pivot.role') != undefined && !pres?.role) { 
+    if (pres?.pivot?.role && get(pres, 'pivot.role') != undefined && !pres?.role) {
       pres.role = pres.pivot.role;
     }
     if (pres?.pivot?.role && get(pres, 'pivot.order') != undefined && !pres?.order) {
@@ -113,7 +113,7 @@ const getSortedPresenters = (_level: number) => {
               v-for="presenter in getSortedPresenters(n)"
               :key="presenter.id"
             >
-              <CommonPresenterListing 
+              <CommonPresenterListing
                 :presenter="presenter"
               />
             </template>
@@ -127,7 +127,7 @@ const getSortedPresenters = (_level: number) => {
           v-for="presenter in getSortedPresenters(0)"
           :key="presenter.id"
         >
-          <CommonPresenterListing 
+          <CommonPresenterListing
             :presenter="presenter"
           />
         </template>

package/dist/runtime/components/profile/components/SidebarNavItem.vue

@@ -50,7 +50,5 @@ const onClick = () => {
 </template>
 
 <style scoped>
-.active {
-  @apply bg-gray-500 text-white;
-}
+.active{@apply bg-gray-500 text-white}
 </style>

package/dist/runtime/components/profile/tabs/ProfileImage.vue

@@ -74,7 +74,7 @@ const onFileChanged = (e) => {
       :src="user.profile_image"
       :class="classBinding(classObject, 'image', 'w-100 h-100')"
       alt=""
-    />
+    >
 
     <div
       :class="
@@ -108,12 +108,13 @@ const onFileChanged = (e) => {
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M0 0h24v24H0z"
+            fill="none"
+          />
           <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" />
         </svg>
-        <span :class="classBinding(classObject, 'buttonText', 'ml-2')"
-          >Change Profile Image</span
-        >
+        <span :class="classBinding(classObject, 'buttonText', 'ml-2')">Change Profile Image</span>
       </label>
       <input
         id="inputImg"
@@ -121,7 +122,7 @@ const onFileChanged = (e) => {
         type="file"
         accept="image/*"
         @change="onFileChanged"
-      />
+      >
     </div>
   </div>
 </template>

package/dist/runtime/components/registration/AlreadyRegisteredModal.vue

@@ -86,14 +86,17 @@ const formatDateTime = (_value: string, _format: string = 'LLL') => {
 </template>
 
 
-<style>
+<style lang="postcss">
 #list-striped {
+
   cursor: pointer;
-}
-#list-striped:nth-of-type(odd) {
-  background-color: rgb(240, 240, 240);
-}
-#list-striped:hover {
-  background-color: rgb(230, 230, 230);
+
+  &:nth-of-type(odd) {
+    background-color: rgb(240 ,240, 240);
+  }
+
+  &:hover {
+    background-color: rgb(230 ,230, 230);
+  }
 }
 </style>

package/dist/runtime/components/registration/PaymentForm.vue

@@ -94,30 +94,30 @@ onMounted(() => {
             type="text"
             class="form-input"
           >
-          <ErrorField :errors="errors['cc_number']" />
-          <ErrorField :errors="errors['payment']" />
-        </div>                        
+          <CommonErrorField :errors="errors['cc_number']" />
+          <CommonErrorField :errors="errors['payment']" />
+        </div>
       </div>
       <div class="flex flex-1 my-2">
         <div class="flex-1 mx-1">
           <label class="block font-semibold text-gray-800 mb-1">
             Exp. Month
           </label>
-          <SelectDropDown 
+          <CommonSelectDropDown
             v-model="paymentInputs['cc_exp_month']"
             :options="monthArray"
           />
-          <ErrorField :errors="errors['cc_exp_month']" />
+          <CommonErrorField :errors="errors['cc_exp_month']" />
         </div>
         <div class="flex-1 mx-1">
           <label class="block font-semibold text-gray-800 mb-1">
             Exp. Year
           </label>
-          <SelectDropDown
+          <CommonSelectDropDown
             v-model="paymentInputs['cc_exp_year']"
             :options="yearArray"
           />
-          <ErrorField :errors="errors['cc_exp_year']" />
+          <CommonErrorField :errors="errors['cc_exp_year']" />
         </div>
         <div class="flex-1 mx-1">
           <label class="block font-semibold text-gray-800 mb-1">
@@ -128,9 +128,9 @@ onMounted(() => {
             type="text"
             class="form-input"
           >
-          <ErrorField :errors="errors['cc_cvc']" />
-        </div>                
-      </div>           
+          <CommonErrorField :errors="errors['cc_cvc']" />
+        </div>
+      </div>
     </div>
   </div>
 </template>

package/dist/runtime/components/registration/RegistrationForm.vue

@@ -101,7 +101,7 @@ const debounceEmail = debounce(() => {
 const closeUserAcctError = (): void => {
   if (group.value.type == 'media') {
     errors.value['user'] = [];
-  };
+  }
   showLogin.value = false;
 };
 
@@ -414,4 +414,4 @@ onMounted(() => {
       </template>
     </CommonModal>
   </div>
-</template>
+</template>

package/dist/runtime/components/registration/RegistrationGroupSelect.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { toRefs } from "vue";
+import { toRefs } from 'vue';
+import { storeToRefs } from 'pinia';
 import { get } from 'lodash-es';
-import { Group } from "../../models/conference";
-import { useUserStore } from "../../store/user";
-import { useTemplateConfigsStore } from "../../store/templateConfigs";
-import { storeToRefs } from "pinia";
+import { useUserStore } from '../../store/user';
+import { useTemplateConfigsStore } from '../../store/templateConfigs';
+import type { Group } from '../../models/group';
 
 type Props = {
   content: any[];
@@ -80,8 +80,12 @@ const checkAlreadyRegistered = (_group_id: number): boolean => {
         :class="index != content.length - 1 ? 'border-b border-gray-400' : ''"
       >
         <div class="flex flex-1 flex-col py-2">
-          <div class="flex-1 mb-2 text-xl font-bold">{{ group.name }}</div>
-          <div class="flex-1">{{ group.description }}</div>
+          <div class="flex-1 mb-2 text-xl font-bold">
+            {{ group.name }}
+          </div>
+          <div class="flex-1">
+            {{ group.description }}
+          </div>
         </div>
 
         <div class="flex flex-col grow-0 items-center justify-between">

package/dist/runtime/components/registration/StripePaymentForm.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, toRefs, unref, computed, onBeforeMount, onMounted } from 'vue';
+import { ref, toRefs, unref, computed, onBeforeMount } from 'vue';
 import { StripeElements, StripeElement } from 'vue-stripe-js'
 import { loadStripe } from '@stripe/stripe-js'
 
@@ -86,16 +86,22 @@ onBeforeMount(() => {
       <div class="flex-1">
         Payment Information
       </div>
-      <div class="flex-1 text-right">{{ totalFormatted }}</div>
+      <div class="flex-1 text-right">
+        {{ totalFormatted }}
+      </div>
     </div>
 
-    <p class="text-red-600 my-3" v-if="errors.payment">
+    <p
+      v-if="errors.payment"
+      class="text-red-600 my-3"
+    >
       {{ errors.payment[0] }}
     </p>
 
+    <!-- TODO - incorporate instance in v-slot -->
     <StripeElements
       v-if="stripeLoaded"
-      v-slot="{ elements, instance }"
+      v-slot="{ elements }"
       ref="elms"
       :stripe-key="stripeKey"
       :instance-options="instanceOptions"
@@ -111,31 +117,5 @@ onBeforeMount(() => {
 </template>
 
 <style>
-  .StripeElement {
-    box-sizing: border-box;
-
-    height: 40px;
-
-    padding: 10px 12px;
-
-    border: 1px solid transparent;
-    border-radius: 4px;
-    background-color: white;
-
-    box-shadow: 0 1px 3px 0 #e6ebf1;
-    -webkit-transition: box-shadow 150ms ease;
-    transition: box-shadow 150ms ease;
-  }
-
-  .StripeElement--focus {
-    box-shadow: 0 1px 3px 0 #cfd7df;
-  }
-
-  .StripeElement--invalid {
-    border-color: #fa755a;
-  }
-
-  .StripeElement--webkit-autofill {
-    background-color: #fefde5 !important;
-  }
+.StripeElement{background-color:#fff;border:1px solid transparent;border-radius:4px;box-shadow:0 1px 3px 0 #e6ebf1;box-sizing:border-box;height:40px;padding:10px 12px;transition:box-shadow .15s ease}.StripeElement--focus{box-shadow:0 1px 3px 0 #cfd7df}.StripeElement--invalid{border-color:#fa755a}.StripeElement--webkit-autofill{background-color:#fefde5!important}
 </style>