@icvdeveloper/common-module 0.0.29 → 0.0.32

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "v3plus-common-module",
   "configKey": "v3plusCommonModule",
-  "version": "0.0.29"
+  "version": "0.0.32"
 }

package/dist/runtime/components/affiliates/AffiliatePage.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { toRefs } from "vue";
 import { Affiliate } from "../../models/affiliate";
 import { Sponsor } from "../../models/conference";
 

package/dist/runtime/components/agenda/AgendaTabbed.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { toRefs, computed } from "vue";
 import { storeToRefs } from "pinia";
 import { useAgenda } from "../../composables/useAgenda";
 import { Conference, Sponsor as SponsorType } from "../../models/conference";
@@ -215,7 +216,7 @@ const presentersContainer = computed(() => {
                         {{
                           formatTimezoneToLocal(
                             presentation.date,
-                            "h:m a",
+                            "h:mm a",
                             conference.timezone
                           )
                         }}

package/dist/runtime/components/agenda/components/InfoLink.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { ref, toRefs, computed } from "vue";
 import { Presentation } from "../../../models/conference";
 
 type Props = {

package/dist/runtime/components/agenda/components/PlayIcon.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { toRefs } from "vue";
 import { usePresentation } from "../../../composables/usePresentation";
 import { Conference, Presentation } from "../../../models/conference";
 import { Icons } from "../../../models/icons";

package/dist/runtime/components/agenda/components/PresentationLink.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { toRefs, computed } from "vue";
 import { useAgenda } from "../../../composables/useAgenda";
 import { useConferenceHelpers } from "../../../composables/useConferenceHelpers";
 import { usePresentation } from "../../../composables/usePresentation";
@@ -16,16 +17,18 @@ type Props = {
   presentation: Presentation;
   track: Track | TrackGroup;
   showInfoLink?: boolean;
+  simpleLayout?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   showInfoLink: true,
+  simpleLayout: false,
 });
 
 const { conference, track, presentation } = toRefs(props);
 
 // Methods
-const { conferenceIsLive, conferenceIsArchived } =
+const { conferenceIsLiveOrMixed, conferenceIsArchived } =
   useConferenceHelpers(conference);
 const { isSmallGroupedTrack } = useAgenda(conference);
 const {
@@ -45,103 +48,90 @@ const presentationNameClass = computed(() => {
 
 <template>
   <div>
-    <!-- LIVE AGENDA GO TO WEBCAST PAGE -->
-    <div v-if="conferenceIsLive()">
-      <div class="flex flex-col flex-wrap py-1">
-        <h2 class="flex-initial" :class="presentationNameClass">
-          <!-- zoom text link -->
+    <div v-if="!simpleLayout">
+      <!-- LIVE AGENDA GO TO WEBCAST PAGE -->
+      <div>
+        <h2 class="flex flex-initial flex-row" :class="presentationNameClass">
+          <!-- zoom text & icon link -->
           <CommonZoomModal
-            v-if="presentation.type == 'zoom'"
+            v-if="
+              isAgenda &&
+              conferenceIsLiveOrMixed(conference) &&
+              presentation.type == 'zoom'
+            "
             :presentation-id="presentation.id"
             modal-size="full"
           >
             <template #modal-link>
-              <span class="font-semibold no-underline heading-link">{{
-                presentation.name
-              }}</span>
+              <span class="font-semibold no-underline heading-link"
+                >{{ presentation.name }}
+                <PlayIcon
+                  :presentation="presentation"
+                  :conference="conference"
+                  :class="'justify-center md:justify-start'"
+                  icon="zoom"
+                ></PlayIcon>
+              </span>
             </template>
           </CommonZoomModal>
 
-          <!-- stream text link -->
+          <!-- live/archive stream text & icon link -->
           <a
-            v-else
+            v-else-if="
+              (isAgenda && conferenceIsLiveOrMixed(conference)) ||
+              (conferenceIsArchived(conference) && presentation.type != 'zoom')
+            "
             class="font-semibold no-underline heading-link"
-            :target="getPresentationLinkTarget(presentation)"
             :href="getLivePresentationLinkDestination(presentation, track)"
-            >{{ presentation.name }}</a
+            :target="getPresentationLinkTarget(presentation)"
+            @click="playPresentation(track, presentation, conference)"
+          >
+            {{ presentation.name
+            }}<transition name="fade">
+              <PlayIcon
+                v-if="presentationIsLiveOrMixed(presentation)"
+                :presentation="presentation"
+                :conference="conference"
+                :class="'justify-center md:justify-start'"
+                icon="playarrow"
+              ></PlayIcon>
+            </transition>
+          </a>
+
+          <!-- text only catchall -->
+          <span v-else class="font-semibold" :class="presentationNameClass"
+            >{{ presentation.name }}</span
           >
 
           <!-- session details -->
           <InfoLink
             v-if="showInfoLink && presentation.description"
             :presentation="presentation"
-            :use-icon="showPresentationLinkIcon()"
-            :link-text="getPresentationLinkText()"
-            :new-line="isSmallGroupedTrack(track)"
-            class="ml-1"
-          ></InfoLink>
-        </h2>
+            :use-icon="useIcon"
+            :link-text="infoLinkText"
+            :new-line="isSmallGroupedTrack"
+            class="ml-2"
+          />
 
-        <!-- zoom icon link -->
-        <CommonZoomModal
-          v-if="presentation.type == 'zoom'"
-          :presentation-id="presentation.id"
-          modal-size="full"
-        >
-          <template #modal-link>
-            <PlayIcon
-              :presentation="presentation"
-              :conference="conference"
-              :class="'justify-center md:justify-start'"
-              icon="zoom"
-            ></PlayIcon>
-          </template>
-        </CommonZoomModal>
-        <!-- stream icon link -->
-        <a
-          v-else
-          class="no-underline"
-          :target="getPresentationLinkTarget(presentation)"
-          :href="getLivePresentationLinkDestination(presentation, track)"
-        >
-          <PlayIcon
-            v-if="presentationIsLiveOrMixed(presentation)"
+          <!-- favorites -->
+          <favorite
+            v-if="allowFavorites && currentUser.token"
+            class="ml-1"
             :presentation="presentation"
-            :conference="conference"
-            :class="'justify-center md:justify-start'"
-            icon="playarrow"
-          ></PlayIcon>
-        </a>
+            @click="handleFavoriteClick"
+          />
+        </h2>
       </div>
     </div>
-    <!-- ARCHIVE AGENDA GO TO MEDIA PAGE -->
-    <div v-if="conferenceIsArchived()">
-      <h2 class="font-semibold" :class="presentationNameClass">
-        <a
-          class="no-underline heading-link"
-          :target="getPresentationLinkTarget(presentation)"
-          :href="getArchivePresentationLinkDestination(presentation)"
-          >{{ presentation.name }}</a
-        >
-        <a
-          :target="getPresentationLinkTarget(presentation)"
-          :href="getArchivePresentationLinkDestination(presentation)"
-          ><CommonSvgIcon
-            icon="playarrow"
-            class="ml-1 align-middle"
-            style="display: inline-block; margin-bottom: 2px"
-            :icon-width="'20px'"
-          ></CommonSvgIcon
-        ></a>
-        <InfoLink
-          v-if="showInfoLink && presentation.description"
-          :presentation="presentation"
-          :use-icon="showPresentationLinkIcon()"
-          :link-text="getPresentationLinkText()"
-          :new-line="isSmallGroupedTrack(track)"
-          class="ml-1"
-        ></InfoLink>
-      </h2>
+
+    <!-- SIMPLE LAYOUT -->
+    <div v-else>
+      <a
+        class="underline cursor-pointer"
+        @click="playPresentation(track, presentation, conference)"
+      >
+        {{ presentation.name }}
+      </a>
     </div>
   </div>
 </template>

package/dist/runtime/components/agenda/components/Sponsor.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { find } from "lodash-es";
+import { ref, toRefs } from "vue";
 import { Sponsor as SponsorModel } from "../../../models/conference";
 
 type Props = {

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { ref, computed, onMounted } from "vue";
 import { storeToRefs } from "pinia";
 import {
   isBefore,
@@ -10,6 +11,7 @@ import {
   addHours,
   addMinutes,
 } from "date-fns";
+import { useTemplateConfigsStore } from "../../store";
 
 interface Props {
   date: string;
@@ -53,7 +55,7 @@ const clockStyle = computed(() => {
 });
 
 const fontClass = computed(() => {
-  const fontBase = "text-countdown-int font-bold";
+  const fontBase = "font-bold";
   return props.isCompact === true
     ? fontBase + " text-xl lg:text-2xl"
     : fontBase + " text-2xl lg:text-4xl";
@@ -135,6 +137,40 @@ onMounted(() => {
             </transition>
           </div>
         </div>
+
+        <!-- Minutes -->
+        <div
+          v-if="showMinutes"
+          class="item-container"
+          :class="{ dropshade: clockStyle == 'dials' }"
+        >
+          <div class="unit-label-container" :class="clockStyle">min</div>
+          <div class="unit-container contrast-border" :class="clockStyle">
+            <div v-if="clockStyle == 'windows'" :class="fontClass">
+              {{ minutes }}
+            </div>
+            <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
+              <div :key="minutes" :class="fontClass">{{ minutes }}</div>
+            </transition>
+          </div>
+        </div>
+
+        <!-- Seconds -->
+        <div
+          v-if="showSeconds"
+          class="item-container last"
+          :class="{ dropshade: clockStyle == 'dials' }"
+        >
+          <div class="unit-label-container last" :class="clockStyle">sec</div>
+          <div class="unit-container contrast-border" :class="clockStyle">
+            <div v-if="clockStyle == 'windows'" :class="fontClass">
+              {{ seconds }}
+            </div>
+            <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
+              <div :key="seconds" :class="fontClass">{{ seconds }}</div>
+            </transition>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -195,10 +231,6 @@ onMounted(() => {
   height: 36px;
 }
 
-/* numbers */
-.text-countdown-int {
-  //color: $heading-color-6;
-}
 .countdown-timer.compact .text-countdown-unit {
   @apply pb-1;
 }

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { toRefs, computed } from "vue";
+
 interface Props {
   visible?: boolean;
   modalSize?: string;

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

@@ -0,0 +1,154 @@
+<script lang="ts" setup>
+import { ref, toRefs, computed } from "vue";
+import { cloneDeep } from "lodash-es";
+import { useNavigationConfigStore } from "../../store/navigationConfig";
+import { useTemplateConfigsStore } from "../../store/templateConfigs";
+import { useNavigation } from "../../composables/useNavigation";
+
+type AdditionalItems = {
+  [index: number]: Array<{
+    name: string;
+    url: string;
+  }>;
+};
+
+// props
+type Props = {
+  additionalItems?: AdditionalItems;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  additionalItems: () => {
+    return {};
+  },
+});
+
+const { getEnabled } = useNavigationConfigStore();
+const { globalConfigValue } = useTemplateConfigsStore();
+
+// data
+const { additionalItems } = toRefs(props);
+const navItems = getEnabled();
+const htmlHeader = globalConfigValue("html_header");
+const open = ref<boolean>(false);
+
+// methods
+const { isExternalLink, formatLink } = useNavigation();
+const toggle = () => {
+  open.value = !open.value;
+};
+
+// computed
+const combinedNavItems = computed(() => {
+  const items = cloneDeep(navItems);
+
+  if (Object.keys(additionalItems.value).length > 0) {
+    // get index to insert items at.
+    Object.keys(additionalItems.value).forEach((index) => {
+      if (items[index] !== "undefined") {
+        for (let i = 0; i < additionalItems.value[index].length; i++) {
+          items.splice(index + i, 0, additionalItems.value[index][i]);
+        }
+      }
+    });
+  }
+
+  return items;
+});
+</script>
+
+<template>
+  <div>
+    <div class="flex flex-col">
+      <header class="min-w-full flex sticky pin-t 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
+            v-if="htmlHeader.length"
+            class="flex-initial mb-0"
+            :template="htmlHeader"
+          ></CommonDynamicHtml>
+
+          <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
+                  v-if="!isExternalLink(item)"
+                  :to="formatLink(item)"
+                  exact
+                  class="inline-block"
+                >
+                  {{ item.label || item.name }}
+                </nuxt-link>
+                <a
+                  v-else
+                  :href="formatLink(item)"
+                  :target="isExternalLink(item) ? '_blank' : ''"
+                >
+                  {{ item.label || item.name }}
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+
+        <!-- Mobile Nav -->
+        <div
+          class="flex flex-col content-start mx-auto min-w-full"
+          :class="combinedNavItems.length >= 7 ? 'lg:hidden' : 'md:hidden'"
+        >
+          <div class="mobile-nav flex flex-row justify-between">
+            <CommonDynamicHtml
+              v-if="htmlHeader.length"
+              class="flex-1"
+              :template="htmlHeader"
+            ></CommonDynamicHtml>
+
+            <div class="float-right p-2">
+              <button class="flex items-center px-3 py-2" @click="toggle">
+                <svg
+                  class="fill-current h-3 w-3"
+                  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="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
+                    v-if="!isExternalLink(item)"
+                    :to="formatLink(item)"
+                    exact
+                    class="block w-full text-center"
+                    @click.native="toggle"
+                  >
+                    {{ item.label || item.name }}
+                  </nuxt-link>
+
+                  <a
+                    v-if="isExternalLink(item)"
+                    :href="formatLink(item)"
+                    target="_blank"
+                    @click.native="toggle"
+                  >
+                    {{ item.label || item.name }}
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </header>
+    </div>
+  </div>
+</template>

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { find, get } from "lodash-es";
-import { defineAsyncComponent } from "vue";
+import { toRefs, computed, defineAsyncComponent } from "vue";
 import { Icon, Icons } from "../../models/icons";
 
 /**

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

@@ -6,7 +6,7 @@ import { useConferencesStore } from "../../store/conferences";
 import { useConferenceHelpers } from "../../composables/useConferenceHelpers";
 
 interface Props {
-  conference?: Conference;
+  conference?: Conference | null;
   useEventText?: boolean;
 }
 

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

@@ -26,7 +26,7 @@ const {
   getConferenceRegUrl,
   getConferenceRegText,
   showConferenceRegButton,
-} = useConferenceHelpers(pastEvents);
+} = useConferenceHelpers();
 
 const goEventPage = (conference: Conference) => {
   router.push(`/upcoming-events/${conference.id}`);

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

@@ -32,7 +32,7 @@ const {
   getConferenceRegUrl,
   getConferenceRegText,
   showConferenceRegButton,
-} = useConferenceHelpers(upcomingEvents);
+} = useConferenceHelpers();
 const goEventPage = (conference: Conference) => {
   router.push(`/upcoming-events/${conference.id}`);
 };

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

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { PropType } from "vue";
-
 type Props = {
   errors: Array<string>;
 };
@@ -12,7 +10,7 @@ const { errors } = toRefs(props);
 
 <template>
   <div>
-    <div v-if="errors" class="my-1 text-red-dark">
+    <div v-if="errors" class="my-1 text-red-500">
       <div v-for="error in errors">{{ error }}</div>
     </div>
   </div>

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

@@ -10,11 +10,11 @@ const props = withDefaults(defineProps<Props>(), {
 const { success } = toRefs(props);
 
 const errorClass = computed(() => {
-  return "bg-red-100 border border-red-400 text-red-600 font-bold px-4 py-3 mb-4 rounded relative";
+  return "message-base bg-red-100 border-red-400 text-red-600";
 });
 
 const successClass = computed(() => {
-  return "bg-green-100 border border-green-400 text-green-600 font-bold px-4 py-3 mb-4 rounded relative";
+  return "message-base bg-green-100 border-green-400 text-green-600";
 });
 </script>
 
@@ -23,3 +23,9 @@ const successClass = computed(() => {
     <slot class="pb-0" />
   </div>
 </template>
+
+<style lang="scss" scoped>
+.message-base {
+  @apply border font-bold px-4 py-3 mb-4 rounded relative;
+}
+</style>

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

@@ -1,6 +1,14 @@
 <script lang="ts" setup>
 import CloseIcon from "../../assets/svg/close-icon.svg";
 
+type Props = {
+  placeholder: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: "Search...",
+});
+
 const value = ref<string>("");
 
 const emit = defineEmits<{
@@ -15,15 +23,15 @@ const clear = () => {
 </script>
 
 <template>
-  <div class="relative">
+  <div class="flex flex-row items-center">
     <input
       v-model="value"
       type="text"
-      class="w-full pl-2 pr-5 py-3"
-      placeholder="Search..."
+      class="flex-1 pl-2 pr-5 py-1"
+      :placeholder="placeholder"
       @input="emit('onChange', value)"
     />
-    <span class="pin-r absolute mt-3 mr-5 cursor-pointer" @click="clear">
+    <span class="flex-initial cursor-pointer px-4 py-2" @click="clear">
       <close-icon class="fill-current text-black" />
     </span>
   </div>

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

@@ -8,6 +8,8 @@ const form = ref({
   message: "",
 });
 const submitted = ref<boolean>(false);
+
+// @todo add error handling to other form fields, or remove error fields from each field
 const errors = ref<[]>([]);
 
 const supportStore = useSupportStore();
@@ -20,9 +22,10 @@ const handleForm = () => {
       submitted.value = true;
     })
     .catch((error) => {
-      errors.value = get(error.response.data, "errors", {});
+      console.log(error.response);
+      errors.value = get(error.response._data, "errors", {});
       errors.value.response = [
-        "Error: " + get(error.response.data, "message", ""),
+        "Error: " + get(error.response._data, "message", ""),
       ];
     });
 };
@@ -77,7 +80,7 @@ const acceptNumber = () => {
           v-model="form.phone"
           placeholder="Phone"
           :required="false"
-          type="text"
+          type="tel"
           @input="acceptNumber"
         />
       </div>
@@ -89,13 +92,13 @@ const acceptNumber = () => {
 
         <CommonTextArea v-model="form.message" />
 
-        <CopmmonErrorField :errors="errors['message']" />
+        <CommonErrorField :errors="errors['message']" />
       </div>
 
+      <button class="btn btn-secondary" type="submit">Submit</button>
       <div class="mb-3">
         <CommonErrorField :errors="errors['response']" />
       </div>
-      <button class="btn btn-secondary" type="submit">Submit</button>
     </form>
 
     <!-- Submitted Message -->

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

@@ -7,6 +7,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  isEnabled: false,
   color: "#4D4D4D",
 });
 

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

@@ -22,6 +22,7 @@ const changeInput = (e) => {
     class="form-input px-2 py-1"
     :type="type"
     :value="props.modelValue"
+    :placeholder="placeholder"
     @change="changeInput"
   />
 </template>

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

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { ref, toRefs, computed } from "vue";
+
 type Props = {
   title?: string;
   tabContent?: {