@icvdeveloper/common-module 2.0.0 → 2.1.0

package/dist/runtime/components/core/CountdownTimer.vue

@@ -80,7 +80,7 @@ const clockStyle = computed(() => {
 
 const fontClass = computed(() => {
   const fontBase = "font-bold";
-  return props.isCompact === true
+  return props.isCompact
     ? fontBase + " text-xl lg:text-2xl"
     : fontBase + " text-2xl lg:text-4xl";
 });
@@ -139,7 +139,10 @@ onUnmounted(() => {
         )
       "
     >
-      <div v-if="showStatusText" class="flex-initial">
+      <div
+        v-if="showStatusText"
+        class="flex-initial"
+      >
         <h1
           :class="
             classBinding(
@@ -195,7 +198,11 @@ onUnmounted(() => {
             >
               {{ days }}
             </div>
-            <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
+            <transition
+              v-if="clockStyle == 'dials'"
+              name="slide"
+              mode="out-in"
+            >
               <div
                 :key="days"
                 :class="[fontClass, classBinding(classObject, 'unit', '')]"
@@ -238,7 +245,11 @@ onUnmounted(() => {
             >
               {{ hours }}
             </div>
-            <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
+            <transition
+              v-if="clockStyle == 'dials'"
+              name="slide"
+              mode="out-in"
+            >
               <div
                 :key="hours"
                 :class="[fontClass, classBinding(classObject, 'unit', '')]"
@@ -281,7 +292,11 @@ onUnmounted(() => {
             >
               {{ minutes }}
             </div>
-            <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
+            <transition
+              v-if="clockStyle == 'dials'"
+              name="slide"
+              mode="out-in"
+            >
               <div
                 :key="minutes"
                 :class="[fontClass, classBinding(classObject, 'unit', '')]"
@@ -328,7 +343,11 @@ onUnmounted(() => {
             >
               {{ seconds }}
             </div>
-            <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
+            <transition
+              v-if="clockStyle == 'dials'"
+              name="slide"
+              mode="out-in"
+            >
               <div
                 :key="seconds"
                 :class="[fontClass, classBinding(classObject, 'unit', '')]"
@@ -343,35 +362,34 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style scoped>
-.countdown-timer.compact .countdown-container {
-  @apply pt-0 mx-0;
-}
-.countdown-timer.compact h1 {
-  @apply text-xl;
-}
-.countdown-timer.compact .units-container {
-  @apply p-4 mt-1;
-}
-.countdown-timer.compact .unit-container.windows {
-  width: 60px;
+<style lang="postcss" scoped>
+.countdown-timer.compact {
+  .countdown-container {
+    @apply pt-0 mx-0;
+  }
+  h1 {
+    @apply text-xl;
+  }
+  .units-container {
+    @apply p-4 mt-1;
+  }
+  .unit-container.windows {
+    width: 60px;
+  }
 }
 
 /* label + number container */
 .item-container {
   @apply flex flex-col;
 }
-
 /* days hrs min sec labels */
 .unit-label-container {
   @apply text-xs font-light;
   height: 18px;
 }
-
 .unit-label-container.windows {
   @apply pb-4 uppercase tracking-wider;
 }
-
 .unit-label-container.dials {
   @apply mx-0;
   padding-top: 2px;
@@ -381,7 +399,6 @@ onUnmounted(() => {
   border-bottom: 1px solid #ddd;
   background-image: linear-gradient(#fafafa, #efefef, #e6e6e6);
 }
-
 .unit-label-container.dials.last {
   width: 67px;
 }
@@ -390,12 +407,10 @@ onUnmounted(() => {
 .unit-container {
   @apply flex text-center items-center justify-center overflow-hidden;
 }
-
 .unit-container.windows {
   @apply mx-1 px-2 border-4 rounded-lg shadow-md;
   width: 70px;
 }
-
 .unit-container.dials {
   @apply mx-0 shadow;
   width: 70px;
@@ -411,66 +426,67 @@ onUnmounted(() => {
   position: relative;
   overflow: hidden;
 }
-
 .dropshade:before,
 .dropshade:after {
   content: "";
   position: absolute;
   z-index: 1;
   top: 18px;
-  bottom: 0px;
+  bottom: 0;
   width: 85px;
   -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
-  -webkit-border-radius: 15px/80px;
-  -moz-border-radius: 15px/80px;
-  border-radius: 10px/80px;
-  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
+  -webkit-border-radius: 15px / 80px;
+  -moz-border-radius: 15px / 80px;
+  border-radius: 10px / 80px;
+  background-image: linear-gradient(
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.1)
+  );
 }
-
 .dropshade:before {
   left: -84px;
 }
-
 .dropshade:after {
   left: -14px;
 }
-
 .dropshade.last:after {
   left: -18px;
 }
 
 /* lg: dials */
 @screen lg {
-  .countdown-timer.fullsize .unit-container.windows,
-  .countdown-timer.fullsize .unit-container.dials {
-    width: 80px;
-    height: 46px;
-  }
-  .countdown-timer.fullsize .unit-label-container.dials.last {
-    width: 77px;
-  }
-  .countdown-timer.fullsize .dropshade:before {
-    left: -84px;
-  }
-  .countdown-timer.fullsize .dropshade:after {
-    left: -4px;
-  }
-  .countdown-timer.fullsize .dropshade.last:after {
-    left: -8px;
+  .countdown-timer.fullsize {
+    .unit-container.windows,
+    .unit-container.dials {
+      width: 80px;
+      height: 46px;
+    }
+    .unit-label-container.dials.last {
+      width: 77px;
+    }
+    .dropshade:before {
+      left: -84px;
+    }
+    .dropshade:after {
+      left: -4px;
+    }
+    .dropshade.last:after {
+      left: -8px;
+    }
   }
 }
+
 /* dials transitions */
 .slide-leave-active,
 .slide-enter-active {
   transition: 0.3s;
 }
-
 .slide-enter {
   transform: translate(0, -100%);
 }
-
 .slide-leave-active {
   transform: translate(0, 100%);
 }

package/dist/runtime/components/core/DynamicHtml.vue.d.ts

@@ -1,16 +1,13 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     template: {
         type: StringConstructor;
         default: string;
     };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    template: {
-        type: StringConstructor;
-        default: string;
-    };
-}>>, {
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    template: string;
+} & {} & {}>, {
     template: string;
-}, {}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}>;
 export default _default;

package/dist/runtime/components/core/Modal.vue

@@ -116,25 +116,19 @@ const clicked = () => {
   </Transition>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .max-h-1em {
   max-height: 1em;
 }
-
 .bg-smoke-400 {
   background-color: rgba(0, 0, 0, 0.4);
 }
-
 .custom-max-width {
   max-width: 100%;
-}
-@screen lg {
-  .custom-max-width {
+  @screen lg {
     max-width: calc(var(--maxw) * 1.25);
   }
-}
-@screen xl {
-  .custom-max-width {
+  @screen xl {
     max-width: var(--maxw);
   }
 }

package/dist/runtime/components/core/ModalButton.vue

@@ -36,8 +36,8 @@ const closeIfAllowed = () => {
       </div>
     </CommonModal>
 
-    <VButton @click="showModal = true">
+    <CommonVButton @click="showModal = true">
       <template #button> Show Modal </template>
-    </VButton>
+    </CommonVButton>
   </span>
 </template>

package/dist/runtime/components/core/Navbar.vue

@@ -44,8 +44,8 @@ const combinedNavItems = computed(() => {
 
   if (Object.keys(additionalItems.value).length > 0) {
     // get index to insert items at.
-    Object.keys(additionalItems.value).forEach((index) => {
-      if (items[index] !== "undefined") {
+    Object.keys(additionalItems.value).forEach((value: any, index: number) => {
+      if (items[index] !== undefined) {
         for (let i = 0; i < additionalItems.value[index].length; i++) {
           items.splice(index + i, 0, additionalItems.value[index][i]);
         }
@@ -66,23 +66,26 @@ const combinedNavItems = computed(() => {
           class="hidden flex-1 flex-col mx-auto min-w-full"
           :class="combinedNavItems.length < 7 ? 'md:flex' : 'lg:flex'"
         >
-          <CommonDynamicHtml
+          <div
             v-if="htmlHeader.length"
             class="flex-initial mb-0"
-            :template="htmlHeader"
-          ></CommonDynamicHtml>
+            v-html="htmlHeader"
+          />
 
           <nav class="flex flex-1 min-h-8 content-center">
             <ul class="h-full">
-              <li v-for="(item, index) in combinedNavItems" :key="index">
-                <nuxt-link
+              <li
+                v-for="(item, index) in combinedNavItems"
+                :key="index"
+              >
+                <NuxtLink
                   v-if="!isExternalLink(item)"
                   :to="formatLink(item)"
                   exact
                   class="inline-block"
                 >
                   {{ item.label || item.name }}
-                </nuxt-link>
+                </NuxtLink>
                 <a
                   v-else
                   :href="formatLink(item)"
@@ -101,14 +104,17 @@ const combinedNavItems = computed(() => {
           :class="combinedNavItems.length >= 7 ? 'lg:hidden' : 'md:hidden'"
         >
           <div class="mobile-nav flex flex-row justify-between">
-            <CommonDynamicHtml
+            <div
               v-if="htmlHeader.length"
               class="flex-1"
-              :template="htmlHeader"
-            ></CommonDynamicHtml>
+              v-html="htmlHeader"
+            />
 
             <div class="float-right p-2">
-              <button class="flex items-center px-3 py-2" @click="toggle">
+              <button
+                class="flex items-center px-3 py-2"
+                @click="toggle"
+              >
                 <svg
                   class="fill-current h-3 w-3"
                   viewBox="0 0 20 20"
@@ -122,24 +128,30 @@ const combinedNavItems = computed(() => {
           </div>
 
           <div class="flex">
-            <nav :class="open ? 'flex' : 'hidden'" class="w-full">
+            <nav
+              :class="open ? 'flex' : 'hidden'"
+              class="w-full"
+            >
               <ul class="flex-col self-center mx-auto">
-                <li v-for="(item, index) in combinedNavItems" :key="index">
-                  <nuxt-link
+                <li
+                  v-for="(item, index) in combinedNavItems"
+                  :key="index"
+                >
+                  <NuxtLink
                     v-if="!isExternalLink(item)"
                     :to="formatLink(item)"
                     exact
                     class="block w-full text-center"
-                    @click.native="toggle"
+                    @click="toggle"
                   >
                     {{ item.label || item.name }}
-                  </nuxt-link>
+                  </NuxtLink>
 
                   <a
                     v-if="isExternalLink(item)"
                     :href="formatLink(item)"
                     target="_blank"
-                    @click.native="toggle"
+                    @click="toggle"
                   >
                     {{ item.label || item.name }}
                   </a>

package/dist/runtime/components/core/Navigation.vue

@@ -1,30 +1,29 @@
 <script lang="ts" setup>
-import { ref, toRefs, computed } from "vue";
-import { storeToRefs } from "pinia";
-import { useRoute } from "vue-router";
-import { usePresenters } from '../../composables';
-import { useNavigation } from "../../composables/useNavigation";
-import { useAuth } from "../../composables";
-import { useConferenceHelpers } from "../../composables";
-import { useClassBinding } from "../../composables/useClassBinding";
-import { 
+import { ref, toRefs, computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useRoute } from 'vue-router';
+import { usePresenters } from '../../composables/usePresenters';
+import { useNavigation } from '../../composables/useNavigation';
+import { useAuth } from '../../composables/useAuth';
+import { useClassBinding } from '../../composables/useClassBinding';
+import {
     useTemplateConfigsStore,
     useNavigationConfigStore,
     useConferencesStore,
     useAuthStore
-} from "../../store";
+} from '../../store';
 import {
     modalContentEventHook,
     setIsPlayerVisibleEventHook,
     setIsProfileVisibleEventHook,
     setPlayerConferenceEventHook,
     setPlayerPresentationEventHook
- } from "../../composables/useEventHooks";
+ } from '../../composables/useEventHooks';
 import type { Ref } from 'vue';
-import type { PlayerPresentation } from "../../store/modalPlayerConfig";
+import type { PlayerPresentation } from '../../models/conference';
 import type { NavigationClassObj } from '../../@types/components';
-import type { Conference } from "../../models/conference";
-import type { ContentData } from "./VButton.vue";
+import type { Conference } from '../../models/conference';
+import type { ContentData } from '../../models/vButton';
 
 
 type Props = {
@@ -65,7 +64,6 @@ const { user, isLoggedIn } = storeToRefs(useAuthStore());
 const { currentConference } = storeToRefs(useConferencesStore());
 
 // data
-const showAttendeeList = ref<boolean>(false);
 const showMenu = ref<boolean>(false);
 const profileImg = 'https://v3plus-production.s3.us-west-2.amazonaws.com/users/profile.png';
 
@@ -95,10 +93,6 @@ const htmlHeader = computed(() => {
   return globalConfigValue("html_header");
 });
 
-const isVideoEnabled = computed(() => {
-  return globalConfigValue("enable_video_chat");
-});
-
 const hideUserProfile = computed(() => {
   return globalConfigValue("hide_user_profile");
 });
@@ -112,8 +106,8 @@ const emitLoginModal = (): void => {
 
 const emitStreamTest = (): void => {
   const streamPres: PlayerPresentation = {
-    player_type: 'live', 
-    data: { 
+    player_type: 'live',
+    data: {
       id: 0,
       access: true,
       name: 'Stream Test',
@@ -173,8 +167,8 @@ const emitStreamTest = (): void => {
           <li
             v-if="
               currentConference &&
-              currentConference.agenda_enabled &&
-              route.name === 'events-id'
+                currentConference.agenda_enabled &&
+                route.name === 'events-id'
             "
           >
             <a
@@ -257,7 +251,10 @@ const emitStreamTest = (): void => {
                   </nuxt-link>
                 </template>
                 <template v-else>
-                  <a @click="emitLoginModal()" class="cursor-pointer">Log In</a>
+                  <a
+                    class="cursor-pointer"
+                    @click="emitLoginModal()"
+                  >Log In</a>
                 </template>
               </li>
             </template>
@@ -268,24 +265,20 @@ const emitStreamTest = (): void => {
   </div>
 </template>
 
-<style>
+<style lang="postcss">
 nav.header ul li {
   @apply border-2 border-transparent text-black cursor-pointer py-1 md:inline-block md:ml-8;
 }
-
 nav.header ul li:hover {
   @apply border-b-black;
 }
-
 nav.header ul li a.nav-link,
 nav.header ul li a.nav-link:hover {
   @apply cursor-pointer text-black;
 }
-
 nav.header ul li.nav-li-color {
   @apply text-red-500;
 }
-
 nav.header ul li.nav-li-color a.nav-link,
 nav.header ul li.nav-li-color a.nav-link:hover {
   @apply text-red-500;

package/dist/runtime/components/core/SvgIcon.vue

@@ -218,7 +218,10 @@ const iconComponent = computed(() => {
 </script>
 
 <template>
-  <div :style="iconDims" :class="classBinding(classObject, 'container', '')">
+  <div
+    :style="iconDims"
+    :class="classBinding(classObject, 'container', '')"
+  >
     <component
       :is="iconComponent"
       :style="iconStyle"

package/dist/runtime/components/core/VButton.vue

@@ -1,13 +1,7 @@
 <script lang="ts" setup>
 import { toRefs } from "vue";
-import { modalContentEventHook } from "../../composables/useEventHooks";
-export type ContentData = {
-  contentObj?: {};
-  contentArray?: [];
-  contentString?: string;
-  contentType?: string;
-  modalSize?: number;
-};
+import { modalContentEventHook } from '../../composables/useEventHooks';
+import type { ContentData } from '../../models/vButton';
 
 const props = withDefaults(defineProps<ContentData>(), {
   contentObj: () => { return {} },

package/dist/runtime/components/core/ZoomModal.vue

@@ -27,11 +27,17 @@ const zoomUrl = computed(() => {
       @trigger="showModal = false"
     >
       <template #modal-body>
-        <iframe :src="zoomUrl" class="w-full h-full"></iframe>
+        <iframe
+          :src="zoomUrl"
+          class="w-full h-full"
+        />
       </template>
     </CommonModal>
-    <a href="javascript:null" @click="showModal = true">
-      <slot name="modal-link"></slot>
+    <a
+      href="javascript:null"
+      @click="showModal = true"
+    >
+      <slot name="modal-link" />
     </a>
   </span>
 </template>

package/dist/runtime/components/events/EventHeader.vue

@@ -18,7 +18,6 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 // stores
-const conferenceStore = useConferencesStore();
 const { globalConfigValue, pagesConfigValue } = useTemplateConfigsStore();
 
 // reactive data
@@ -69,7 +68,10 @@ const mainBodyImage = computed(() => {
 </script>
 
 <template>
-  <div :style="mainStyles" class="flex bg-color-2">
+  <div
+    :style="mainStyles"
+    class="flex bg-color-2"
+  >
     <div
       v-if="useEventText"
       class="text-center flex flex-1 flex-col items-center justify-center h-auto p-12"
@@ -122,12 +124,20 @@ const mainBodyImage = computed(() => {
           :href="getConferenceRegUrl()"
           :target="/^http/.test(getConferenceRegUrl()) ? '_blank' : '_self'"
         >
-          <button class="btn" :class="hasOtherButton ? 'md:ml-4' : ''">
+          <button
+            class="btn"
+            :class="hasOtherButton ? 'md:ml-4' : ''"
+          >
             {{ getConferenceRegText() }}
           </button>
         </a>
       </div>
     </div>
-    <img v-else :src="mainBodyImage" class="w-full h-auto" />
+    <img
+      v-else
+      :src="mainBodyImage"
+      class="w-full h-auto"
+      alt="Event header image"
+    >
   </div>
 </template>