@icvdeveloper/common-module 1.4.13 → 2.0.0

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

@@ -0,0 +1,293 @@
+<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 { 
+    useTemplateConfigsStore,
+    useNavigationConfigStore,
+    useConferencesStore,
+    useAuthStore
+} from "../../store";
+import {
+    modalContentEventHook,
+    setIsPlayerVisibleEventHook,
+    setIsProfileVisibleEventHook,
+    setPlayerConferenceEventHook,
+    setPlayerPresentationEventHook
+ } from "../../composables/useEventHooks";
+import type { Ref } from 'vue';
+import type { PlayerPresentation } from "../../store/modalPlayerConfig";
+import type { NavigationClassObj } from '../../@types/components';
+import type { Conference } from "../../models/conference";
+import type { ContentData } from "./VButton.vue";
+
+
+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 showAttendeeList = ref<boolean>(false);
+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 isVideoEnabled = computed(() => {
+  return globalConfigValue("enable_video_chat");
+});
+
+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 @click="emitLoginModal()" class="cursor-pointer">Log In</a>
+                </template>
+              </li>
+            </template>
+          </template>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<style>
+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,7 @@ 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,41 @@
+<script lang="ts" setup>
+import { toRefs } from "vue";
+import { modalContentEventHook } from "../../composables/useEventHooks";
+export type ContentData = {
+  contentObj?: {};
+  contentArray?: [];
+  contentString?: string;
+  contentType?: string;
+  modalSize?: number;
+};
+
+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>

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

@@ -30,7 +30,7 @@ const zoomUrl = computed(() => {
         <iframe :src="zoomUrl" class="w-full h-full"></iframe>
       </template>
     </CommonModal>
-    <a class="no-underline" href="javascript:null" @click="showModal = true">
+    <a href="javascript:null" @click="showModal = true">
       <slot name="modal-link"></slot>
     </a>
   </span>

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

@@ -259,7 +259,7 @@ const showLoginButton = computed((): boolean => {
           >
             <!-- event details -->
             <div
-              :class="classBinding(classObject, 'eventDetails', 'flex-grow')"
+              :class="classBinding(classObject, 'eventDetails', 'grow')"
             >
               <template v-if="showBrand && getBrand(conference.affiliates)">
                 <a
@@ -274,7 +274,7 @@ const showLoginButton = computed((): boolean => {
                       classBinding(
                         classObject,
                         'eventBrand',
-                        'text-base font-bold leading-tight tracking-wide mb-3'
+                        'text-base font-bold leading-tight tracking-wider mb-3'
                       )
                     "
                   >
@@ -290,7 +290,6 @@ const showLoginButton = computed((): boolean => {
                         conference.id
                       }`
                 "
-                class="no-underline"
               >
                 <h2
                   :class="
@@ -309,7 +308,7 @@ const showLoginButton = computed((): boolean => {
                   classBinding(
                     classObject,
                     'eventDate',
-                    'text-base leading-normal tracking-wide font-light uppercase md:text-md lg:text-lg'
+                    'text-base leading-normal tracking-wider font-light uppercase md:text-md lg:text-lg'
                   )
                 "
               >

package/dist/runtime/components/forms/CheckboxGroup.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { ref, toRefs } from 'vue';
+
+type Props = {
+  options: any,
+}
+
+const props = defineProps<Props>();
+
+const { options } = toRefs(props);
+
+// data
+// TODO - set type
+const currentValueArray = ref<any[]>([]);
+
+// emits
+// TODO - set value type
+const emit = defineEmits<{
+  (event: 'input', value: any): void;
+}>();
+
+// methods
+const onChange = (): void => {
+  emit('input', currentValueArray.value);
+};
+</script>
+
+
+<template>
+  <span>
+    <div
+      v-for="(option, index) in options"
+      :key="index"
+      class="mb-2 ml-4"
+    >                        
+      <p-check
+        v-model="currentValueArray"
+        :value="option.value"
+        @change="onChange"
+      >
+        {{ option.name }}
+      </p-check>
+    </div>   
+  </span>   
+</template>
+

package/dist/runtime/components/forms/ErrorField.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { toRefs } from 'vue';
 type Props = {
   errors: Array<string>;
 };
@@ -10,8 +11,16 @@ const { errors } = toRefs(props);
 
 <template>
   <div>
-    <div v-if="errors" class="my-1 text-red-500">
-      <div v-for="error in errors">{{ error }}</div>
+    <div
+      v-if="errors"
+      class="my-1 text-red-500"
+    >
+      <div
+        v-for="(error, index) in errors"
+        :key="index"
+      >
+        {{ error }}
+      </div>
     </div>
   </div>
 </template>

package/dist/runtime/components/forms/RadioGroup.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { toRefs } from 'vue';
+
+type Props = {
+  value: any,
+  options: any
+}
+
+const props = defineProps<Props>();
+
+const { value, options } = toRefs(props);
+
+// emits
+// TODO - set value type
+const emit = defineEmits<{
+  (event: 'input', value: any): void;
+}>();
+
+// computed
+// TODO - what's this for?
+// what is <p-radio> ?
+const guid = () => {
+  return crypto.getRandomValues(new Uint32Array(2)).join('-');
+}
+
+// methods
+const onChange = (e: any): void => {
+  emit('input', e.target.value);
+};
+</script>
+
+
+<template>
+  <span>
+    <div
+      v-for="(option, index) in options"
+      :key="index"
+      class="mb-2 ml-4"
+    >
+      <p-radio
+        v-model="value"
+        color="default"
+        :value="option.value"
+        @change="onChange"
+      >
+        {{ option.name }}
+      </p-radio>
+    </div>    
+  </span>   
+</template>

package/dist/runtime/components/forms/SelectDropDown.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { toRefs } from 'vue';
+
+type Props = {
+  value: any,
+  options: any,
+  firstDisabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  firstDisabled: false
+});
+
+const { value, options, firstDisabled } = toRefs(props);
+
+// emits
+// TODO - set value type
+const emit = defineEmits<{
+  (event: 'input', value: any): void;
+}>();
+
+// methods
+const onInput = (e: any): void => {
+  emit('input', e.target.value);
+};
+</script>
+
+<template>
+  <span>
+    <select
+      class="form-input"
+      :value="value"
+      @change="onInput"
+    >
+      <option
+        v-for="(option, index) in options"
+        :key="index"
+        :value="option.value"
+        :disabled="index==0 && firstDisabled"
+      >   
+        {{ option.name}}
+      </option>                        
+    </select>
+  </span>   
+</template>
+
+

package/dist/runtime/components/forms/SupportForm.vue

@@ -49,7 +49,7 @@ const acceptNumber = () => {
       </div>
 
       <div class="mb-3">
-        <label class="block font-semibold text-grey-darkest mb-1">Name</label>
+        <label class="block font-semibold text-gray-800 mb-1">Name</label>
 
         <CommonTextInput
           v-model="form.name"
@@ -62,7 +62,7 @@ const acceptNumber = () => {
       </div>
 
       <div class="mb-3">
-        <label class="block font-semibold text-grey-darkest mb-1">Email</label>
+        <label class="block font-semibold text-gray-800 mb-1">Email</label>
 
         <CommonTextInput
           v-model="form.email"
@@ -75,7 +75,7 @@ const acceptNumber = () => {
       </div>
 
       <div class="mb-3">
-        <label class="block font-semibold text-grey-darkest mb-1">Phone</label>
+        <label class="block font-semibold text-gray-800 mb-1">Phone</label>
 
         <CommonTextInput
           v-model="form.phone"
@@ -87,7 +87,7 @@ const acceptNumber = () => {
       </div>
 
       <div class="mb-3">
-        <label class="block font-semibold text-grey-darkest mb-1"
+        <label class="block font-semibold text-gray-800 mb-1"
           >Message</label
         >
 
@@ -104,8 +104,8 @@ const acceptNumber = () => {
 
     <!-- Submitted Message -->
     <div v-if="submitted" class="text-center my-12">
-      <div class="text-2xl font-bold text-grey-darkest mb-2">Thank you.</div>
-      <div class="text-lg font-semibold text-grey-darker">
+      <div class="text-2xl font-bold text-gray-800 mb-2">Thank you.</div>
+      <div class="text-lg font-semibold text-gray-700">
         Your message has been received.
       </div>
     </div>

package/dist/runtime/components/layouts/Accordion.vue

@@ -43,7 +43,7 @@ const tabTitleValues = computed(() => {
       v-if="tabContent.type === 'url'"
       :href="tabContent.content"
       target="_blank"
-      class="py-3 block no-underline w-full font-hairline inline-flex items-center text-md my-1"
+      class="py-3 block w-full font-extralight inline-flex items-center text-md my-1"
       :class="tabTitleValues.classes"
     >
       <span class="flex-initial">
@@ -53,7 +53,7 @@ const tabTitleValues = computed(() => {
     <a
       v-else
       href="#"
-      class="py-3 block no-underline w-full font-hairline inline-flex items-center text-md my-1"
+      class="py-3 block w-full font-extralight inline-flex items-center text-md my-1"
       :class="tabTitleValues.classes"
       @click.prevent="active = !active"
     >