@icvdeveloper/common-module 1.4.14 → 2.1.0

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

@@ -16,7 +16,7 @@ type Props = {
   classObject?: modalClassObj;
 };
 
-// classObject.components.svgIcon is not functioning properly and cannot be passed to svgIcon component
+// TODO - classObject.components.svgIcon is not functioning properly and cannot be passed to svgIcon component
 const props = withDefaults(defineProps<Props>(), {
   visible: false,
   modalSize: "50",
@@ -45,8 +45,8 @@ const { visible, modalSize, noScroll, showClose, usePadding, classObject } =
 const { classBinding } = useClassBinding();
 
 const modalClass = computed(() => {
-  const padding = usePadding.value ? "p-6" : "";
-  const classes = `relative w-full ${padding} m-auto flex-col flex rounded shadow bg-white modal-box`;
+  const paddingValue = usePadding.value ? 'sm:p-6 sm:pt-6' : '';
+  const classes = `relative w-full ${paddingValue} m-auto flex-col flex border border-white sm:border-none sm:rounded shadow bg-white modal-box`;
   if (noScroll.value) {
     return classes + ` max-h-full overflow-hidden`;
   } else {
@@ -61,20 +61,22 @@ const closeModal = () => {
 const clicked = () => {
   emit("clicked");
 };
+
+// NOTE: to properly destroy/unmount this component and its contents, use v-if on this component's tag in the parent component/page
 </script>
 
 <template>
   <Transition>
     <div
-      v-if="visible"
+      v-show="visible"
       :class="
         classBinding(
           classObject,
           'modalPositionContainer',
-          'fixed top-0 bottom-0 left-0 right-0 z-50 flex bg-smoke-light p-3'
+          'fixed top-0 bottom-0 left-0 right-0 z-50 flex bg-smoke-400 md:p-3'
         )
       "
-      @click="clicked"
+      @click.self="clicked, closeModal()"
     >
       <div
         class="custom-max-width max-h-full"
@@ -87,17 +89,23 @@ const clicked = () => {
             classBinding(
               classObject,
               'modalCloseContainer',
-              'absolute top-0 bottom-0 right-0 z-30 max-h-1em'
+              'absolute top-0 right-0 z-30 max-h-1em'
             )
           "
         >
           <button
-            :class="classBinding(classObject, 'modalButton', 'p-3')"
+            :class="classBinding(classObject, 'modalButton', 'p-2')"
             @click="closeModal()"
           >
-            <span :class="classBinding(classObject, 'modalButtonIcon', '')"
-              ><CommonSvgIcon icon="close" width=".7rem"
-            /></span>
+            <span :class="classBinding(classObject, 'modalButtonIcon', '')">
+              <CommonSvgIcon
+                icon="close"
+                width=".7rem"
+                :class-object="{
+                  container: 'rounded-full bg-white sm:bg-none p-1 sm:p-0'
+                }"
+              />
+            </span>
           </button>
         </span>
 
@@ -108,25 +116,19 @@ const clicked = () => {
   </Transition>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .max-h-1em {
   max-height: 1em;
 }
-
-.bg-smoke-light {
+.bg-smoke-400 {
   background-color: rgba(0, 0, 0, 0.4);
 }
-
 .custom-max-width {
-  max-width: 85%;
-}
-@screen lg {
-  .custom-max-width {
+  max-width: 100%;
+  @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

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { ref, toRefs } from "vue";
+
+type Props = {
+  modalSize: string;
+  closeOnClick?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  closeOnClick: true,
+});
+
+const { closeOnClick } = toRefs(props);
+
+// data
+const showModal = ref<boolean>(false);
+
+// methods
+const closeIfAllowed = () => {
+  if (closeOnClick.value) showModal.value = false;
+};
+</script>
+
+<template>
+  <span>
+    <CommonModal
+      v-if="showModal"
+      @trigger="showModal = false"
+      @clicked="closeIfAllowed"
+    >
+      <div id="modal-title">
+        <slot name="title" />
+      </div>
+      <div id="modal-body">
+        <slot name="body" />
+      </div>
+    </CommonModal>
+
+    <CommonVButton @click="showModal = true">
+      <template #button> Show Modal </template>
+    </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]);
         }
@@ -60,29 +60,32 @@ const combinedNavItems = computed(() => {
 <template>
   <div>
     <div class="flex flex-col">
-      <header class="min-w-full flex sticky pin-t z-50">
+      <header class="min-w-full flex sticky top-0 z-50">
         <!-- Standard Screen Nav -->
         <div
           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="list-reset h-full">
-              <li v-for="(item, index) in combinedNavItems" :key="index">
-                <nuxt-link
+            <ul class="h-full">
+              <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">
-              <ul class="flex-col self-center list-reset mx-auto">
-                <li v-for="(item, index) in combinedNavItems" :key="index">
-                  <nuxt-link
+            <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"
+                >
+                  <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

@@ -0,0 +1,286 @@
+<script lang="ts" setup>
+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';
+import {
+    modalContentEventHook,
+    setIsPlayerVisibleEventHook,
+    setIsProfileVisibleEventHook,
+    setPlayerConferenceEventHook,
+    setPlayerPresentationEventHook
+ } from '../../composables/useEventHooks';
+import type { Ref } from 'vue';
+import type { PlayerPresentation } from '../../models/conference';
+import type { NavigationClassObj } from '../../@types/components';
+import type { Conference } from '../../models/conference';
+import type { ContentData } from '../../models/vButton';
+
+
+type Props = {
+  classObject?: NavigationClassObj;
+  isVirtual?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: '',
+      headerToggleContainer: '',
+      toggleContainer: '',
+      toggleButton: '',
+      svgElement: '',
+      menuContainer: '',
+      navElement: '',
+      listElement: '',
+      liveEventLink: '',
+      eventOverviewLink: '',
+      agendaAnchorLink: '',
+      presentersAnchorLink: '',
+      navigationItemLink: '',
+      attendeeListListItem: '',
+      attendeeListLink: '',
+      logOutListItem: '',
+      logOutLink: '',
+      profileLink: '',
+      profileImg: '',
+      loginListItem: '',
+    }
+  },
+  isVirtual: false
+});
+
+const { classObject, isVirtual } = toRefs(props);
+const { user, isLoggedIn } = storeToRefs(useAuthStore());
+const { currentConference } = storeToRefs(useConferencesStore());
+
+// data
+const showMenu = ref<boolean>(false);
+const profileImg = 'https://v3plus-production.s3.us-west-2.amazonaws.com/users/profile.png';
+
+// methods
+const { formatLink, isExternalLink } = useNavigation();
+const { isLoginDisabled } = useAuth();
+const { classBinding } = useClassBinding();
+
+const { logout } = useAuthStore();
+const { globalConfigValue } = useTemplateConfigsStore();
+const { getEnabled } = useNavigationConfigStore();
+
+const { getPresentersLabel } = usePresenters(currentConference as Ref<Conference>);
+
+const route = useRoute();
+
+const toggleMenu = () => {
+  showMenu.value = !showMenu.value;
+};
+
+// computed
+const navigationItems = computed(() => {
+  return getEnabled();
+});
+
+const htmlHeader = computed(() => {
+  return globalConfigValue("html_header");
+});
+
+const hideUserProfile = computed(() => {
+  return globalConfigValue("hide_user_profile");
+});
+
+// methods
+const emitLoginModal = (): void => {
+  const modalContent: ContentData = {};
+  modalContent.contentType = 'registration';
+  modalContentEventHook.trigger(modalContent);
+};
+
+const emitStreamTest = (): void => {
+  const streamPres: PlayerPresentation = {
+    player_type: 'live',
+    data: {
+      id: 0,
+      access: true,
+      name: 'Stream Test',
+      description: 'This is a test stream. Please confirm you can see the video and can hear the audio clearly prior to the event.',
+      is_live: true,
+      video_url: '',
+      track: {
+        channel: 'stream-test'
+      }
+    }};
+  setPlayerPresentationEventHook.trigger(streamPres);
+  setPlayerConferenceEventHook.trigger(currentConference);
+  setIsPlayerVisibleEventHook.trigger(true);
+};
+</script>
+
+<template>
+  <div
+    :class="
+      classBinding(
+        classObject,
+        'container',
+        'flex-1 md:items-end lg:flex flex-row justify-between max-w-screen-xl mx-auto bg-white'
+      )
+    "
+  >
+    <div :class="classBinding(classObject, 'headerToggleContainer', 'flex-1 flex flex-row justify-between')">
+      <!-- adjust -->
+      <span
+        v-if="htmlHeader && htmlHeader.length"
+        v-html="htmlHeader"
+      />
+      <div :class="classBinding(classObject, 'toggleContainer', 'md:hidden shrink items-center self-center p-2')">
+        <button
+          :class="classBinding(classObject, 'toggleButton', 'flex items-center px-3 py-2')"
+          @click="toggleMenu"
+        >
+          <svg
+            :class="classBinding(classObject, 'svgElement', 'fill-current h-6 w-6')"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>Menu</title>
+            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <div :class="classBinding(classObject, 'menuContainer', 'flex-1 flex md:flex-initial')">
+      <nav
+        :class="[showMenu ? 'flex' : 'hidden', classBinding(classObject, 'navElement', 'header w-full md:block md:w-auto md:flex-1')]"
+      >
+        <ul
+          :class="classBinding(classObject, 'listElement', 'self-center mx-auto allsmallcaps text-xs leading-tight text-center md:max-h-min md:h-full md:float-right')"
+        >
+          <li
+            v-if="
+              currentConference &&
+                currentConference.agenda_enabled &&
+                route.name === 'events-id'
+            "
+          >
+            <a
+              href="#agenda"
+              :class="classBinding(classObject, 'agendaAnchorLink', 'nav-link')"
+            >Agenda</a>
+          </li>
+          <li v-if="currentConference && route.name === 'events-id'">
+            <a
+              href="#presenters"
+              :class="classBinding(classObject, 'presentersAnchorLink', 'nav-link')"
+            >
+              {{ getPresentersLabel(2) }}
+            </a>
+          </li>
+          <template
+            v-for="(item, index) in navigationItems"
+            :key="index"
+          >
+            <li>
+              <template v-if="!isExternalLink(item)">
+                <nuxt-link
+                  v-if="isVirtual && item.slug == 'stream-test'"
+                  :class="['cursor-pointer', classBinding(classObject, 'navigationItemLink', 'nav-link')]"
+                  @click.enter="emitStreamTest"
+                >
+                  {{ item.label }}
+                </nuxt-link>
+                <nuxt-link
+                  v-else
+                  :to="formatLink(item)"
+                  exact
+                  :class="classBinding(classObject, 'navigationItemLink', 'nav-link')"
+                  @click.enter="toggleMenu"
+                >
+                  {{ item.label }}
+                </nuxt-link>
+              </template>
+              <a
+                v-else
+                :href="formatLink(item)"
+                :target="isExternalLink(item) ? '_blank' : ''"
+                @click.enter="toggleMenu"
+              >
+                {{ item.label }}
+              </a>
+            </li>
+          </template>
+          <template v-if="!isLoginDisabled">
+            <template v-if="isLoggedIn">
+              <li :class="classBinding(classObject, 'logOutListItem', 'md:inline-block')">
+                <a
+                  :class="classBinding(classObject, 'logOutLink', 'block md:inline-block w-auto md:w-full text-center cursor-pointer')"
+                  @click="logout"
+                >Log Out</a>
+              </li>
+              <li
+                v-if="user != null && user.token && !hideUserProfile"
+                :class="classBinding(classObject, 'profileLink', 'inline-block')"
+              >
+                <a @click="setIsProfileVisibleEventHook.trigger(true)">
+                  <img
+                    :class="classBinding(classObject, 'profileImg', 'cursor-pointer rounded-full')"
+                    height="30"
+                    width="30"
+                    :src="user?.profile_image as string ?? profileImg"
+                    alt=""
+                  >
+                </a>
+              </li>
+            </template>
+            <template v-if="!isLoggedIn">
+              <li :class="classBinding(classObject, 'loginListItem', 'block md:inline-block')">
+                <template v-if="!isVirtual">
+                  <nuxt-link
+                    to="/login"
+                    exact
+                  >
+                    Log In
+                  </nuxt-link>
+                </template>
+                <template v-else>
+                  <a
+                    class="cursor-pointer"
+                    @click="emitLoginModal()"
+                  >Log In</a>
+                </template>
+              </li>
+            </template>
+          </template>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<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;
+}
+</style>

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

@@ -8,12 +8,24 @@ import { useClassBinding } from "../../composables/useClassBinding";
  * Delay importing only the icon file that we need
  */
 const icons: Icons = {
+  bell: {
+    color: "#000",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/bell-icon.svg")
+    ),
+  },
   caret: {
     color: "#000",
     component: defineAsyncComponent(
       () => import("../../assets/svg/icon-caret.svg")
     ),
   },
+  chat: {
+    color: "#000",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/chat-icon.svg")
+    ),
+  },
   check: {
     color: "#000",
     component: defineAsyncComponent(
@@ -80,12 +92,24 @@ const icons: Icons = {
       () => import("../../assets/svg/icon-linkedin.svg")
     ),
   },
+  minus: {
+    color: "#000",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/icon-minus.svg")
+    ),
+  },
   newwindow: {
     color: "#333",
     component: defineAsyncComponent(
       () => import("../../assets/svg/icon-new-window.svg")
     ),
   },
+  notification: {
+    color: "#22c55e",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/notification-icon.svg")
+    ),
+  },
   offline: {
     color: "#696665",
     component: defineAsyncComponent(
@@ -116,6 +140,12 @@ const icons: Icons = {
       () => import("../../assets/svg/icon-twitter.svg")
     ),
   },
+  video: {
+    color: "#FFF",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/icon-video.svg")
+    ),
+  },
   website: {
     color: "#4286f4",
     component: defineAsyncComponent(
@@ -188,7 +218,10 @@ const iconComponent = computed(() => {
 </script>
 
 <template>
-  <div :style="iconDims">
+  <div
+    :style="iconDims"
+    :class="classBinding(classObject, 'container', '')"
+  >
     <component
       :is="iconComponent"
       :style="iconStyle"

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

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { toRefs } from "vue";
+import { modalContentEventHook } from '../../composables/useEventHooks';
+import type { ContentData } from '../../models/vButton';
+
+const props = withDefaults(defineProps<ContentData>(), {
+  contentObj: () => { return {} },
+  contentArray: () => { return [] },
+  contentString: '',
+  contentType: '',
+  modalSize: 50
+});
+
+const { contentObj, contentArray, contentString, contentType, modalSize } = toRefs(props);
+
+// methods
+const emitContent = (): void => {
+  // only emit if there's something to emit
+  if (contentType.value.length > 0) {
+    modalContentEventHook.trigger({
+      contentObj: contentObj.value,
+      contentArray: contentArray.value,
+      contentString: contentString.value,
+      contentType: contentType.value,
+      modalSize: modalSize.value,
+    });
+  }
+};
+</script>
+
+<template>
+  <a @click="emitContent">
+    <slot />
+  </a>
+</template>