@icvdeveloper/common-module 2.0.0 → 2.1.0

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, toRefs } from "vue";
+import { inject, ref, toRefs } from "vue";
 import { get } from "lodash-es";
 import type { Conference } from "../../models/conference";
 import { useAgenda } from "../../composables/useAgenda";
@@ -7,13 +7,13 @@ import { usePresentation } from "../../composables/usePresentation";
 import { usePresenters } from "../../composables/usePresenters";
 import { usePresenter } from "../../composables/usePresenter";
 import { useClassBinding } from "../../composables/useClassBinding";
+import type { Ref } from "#imports";
 import type { Presenter } from "../../models/conference";
 import type {
   AgendaListClassObj,
   AgendaListCompObj,
   AgendaListAccordionClassObj,
 } from "../../@types/components";
-import AgendaAccordion from "./components/AgendaListAccordion.vue";
 import Calendar from "./components/Calendar.vue";
 
 type Props = {
@@ -59,14 +59,16 @@ const { getPresentersLabel, getSortedPresenters } = usePresenters(conference);
 
 const { classBinding } = useClassBinding();
 
+const isExpanded: Ref<boolean> = inject('isExpanded', ref<boolean>(false));
+
 // data
 const expandedPres = ref<number>(0);
 
 // methods
 const presentersToComposables = (presenters: Presenter[]) => {
-  const data = [];
+  const data: Presenter[] = [] as Presenter[];
 
-  getSortedPresenters(presenters).forEach((presenter) => {
+  getSortedPresenters(presenters).forEach((presenter: Presenter) => {
     data.push({
       presenter,
       ...usePresenter(presenter),
@@ -101,17 +103,20 @@ const isPres = (_presId: number): boolean => {
       <template v-for="track in getCombinedTrackList(day)">
         <div
           v-for="presentation in track.presentations"
-          :key="presentation.id"
           :id="'agenda-presentation-'+presentation.id"
+          :key="presentation.id"
           :class="classBinding(classObject, 'accordionContainer', '')"
           class="agenda-presentation"
         >
-          <AgendaAccordion
+          <CommonComponentsAgendaListAccordion
             :item-id="presentation.id"
-            :class-object="classObject.components.agendaListAccordion"
+            :class-object="classObject.components?.agendaListAccordion"
             @expanded="setPres"
           >
-            <template #header="isExpanded">
+            <template
+              v-if="isExpanded"
+              #header
+            >
               <div
                 :class="
                   classBinding(
@@ -226,15 +231,14 @@ const isPres = (_presId: number): boolean => {
                       v-for="presenter in presentersToComposables(
                         presentation.presenters
                       )"
-                      :key="presenter.presenter.id"
                       :id="'agenda-presenter-'+presenter.presenter.id"
+                      :key="presenter.presenter.id"
                       :class="
                         classBinding(
                           classObject,
                           'presenterElement',
                           ''
-                        )
-                        + ((presenter.role == 'moderator') ? ' agenda-moderator' : '')
+                        ) + ((presenter.role == 'moderator') ? ' agenda-moderator' : '')
                       "
                       class="agenda-presenter"
                     >
@@ -252,7 +256,7 @@ const isPres = (_presId: number): boolean => {
                         <span
                           v-if="presenter.role == 'moderator'"
                           class="agenda-presenter-moderator-tag text-xs font-bold text-neutral-400"
-                          >
+                        >
                           - MODERATOR
                         </span>
                       </p>
@@ -274,14 +278,14 @@ const isPres = (_presId: number): boolean => {
                 </div>
               </div>
             </template>
-          </AgendaAccordion>
+          </CommonComponentsAgendaListAccordion>
         </div>
       </template>
     </template>
   </div>
 </template>
 
-<style>
+<style lang="postcss">
 .accord {
   transition: height var(--vc-auto-duration) ease-out;
 }

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

@@ -5,7 +5,7 @@ import { DateTime } from "luxon";
 import { useAgenda } from "../../composables/useAgenda";
 import { usePresentation } from "../../composables/usePresentation";
 import { usePresenters } from "../../composables/usePresenters";
-import type { Conference, Day, Presenter, Presentation, Sponsor as SponsorType } from "../../models/conference";
+import type { Conference, Day, Presenter, Sponsor as SponsorType } from "../../models/conference";
 
 type Props = {
   conference: Conference;
@@ -52,7 +52,10 @@ const presentersContainer = computed(() => {
 </script>
 
 <template>
-  <div :id="'agenda-tabbed-'+conference.id" class="agenda-tabbed container mx-auto my-8 shadow-lg">
+  <div
+    :id="'agenda-tabbed-'+conference.id"
+    class="agenda-tabbed container mx-auto my-8 shadow-lg"
+  >
     <!-- TABS -->
     <div class="flex flex-col w-full">
       <div class="flex flex-row w-full">
@@ -72,7 +75,7 @@ const presentersContainer = computed(() => {
             @click="setSelectedDay(day)"
           >
             {{ day.name }}
-            <small v-if="showTabDates(day)">{{ 
+            <small v-if="showTabDates(day)">{{
               DateTime.fromSQL(day?.date as string, { zone: conference.timezone }).toFormat("MMMM d, yyyy")
             }}</small>
           </button>
@@ -122,12 +125,12 @@ const presentersContainer = computed(() => {
           <div
             v-for="(track, trackIndex) in getTracks(group_or_track)"
             :id="
-              (group_or_track.type == 'track_group') ? 
-              'agenda-track-group-'+group_or_track.id :
-              'agenda-track-'+group_or_track.id
+              (group_or_track.type == 'track_group') ?
+                'agenda-track-group-'+group_or_track.id :
+                'agenda-track-'+group_or_track.id
             "
             :key="track.id"
-            :class="(group_or_track.type == 'track_group') ? 
+            :class="(group_or_track.type == 'track_group') ?
               'agenda-track-group' :
               'agenda-track'
             "
@@ -265,8 +268,8 @@ const presentersContainer = computed(() => {
                         v-if="get(presentation, 'presenters.length') > 0"
                         :title="
                           presentation.presenters != undefined ?
-                          getPresentersLabel(presentation.presenters.length) :
-                          'Presenters'
+                            getPresentersLabel(presentation.presenters.length) :
+                            'Presenters'
                         "
                         class="agenda-presenters"
                       >
@@ -327,7 +330,7 @@ const presentersContainer = computed(() => {
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .tracks-container {
   display: grid;
   grid-auto-columns: 1fr;
@@ -337,42 +340,36 @@ const presentersContainer = computed(() => {
   display: contents;
 }
 
-.tracks-container .track-container:nth-child(4n+1) .track-header {
+.tracks-container .track-container:nth-child(4n + 1) .track-header {
   grid-row: 1;
   grid-column: 1;
 }
-
-.tracks-container .track-container:nth-child(4n+2) .track-header {
+.tracks-container .track-container:nth-child(4n + 2) .track-header {
   grid-row: 1;
   grid-column: 2;
 }
-
-.tracks-container .track-container:nth-child(4n+3) .track-header {
+.tracks-container .track-container:nth-child(4n + 3) .track-header {
   grid-row: 1;
   grid-column: 3;
 }
-
-.tracks-container .track-container:nth-child(4n+4) .track-header {
+.tracks-container .track-container:nth-child(4n + 4) .track-header {
   grid-row: 1;
   grid-column: 4;
 }
 
-.tracks-container .track-container:nth-child(4n+1) .track-sessions {
+.tracks-container .track-container:nth-child(4n + 1) .track-sessions {
   grid-row: 2;
   grid-column: 1;
 }
-
-.tracks-container .track-container:nth-child(4n+2) .track-sessions {
+.tracks-container .track-container:nth-child(4n + 2) .track-sessions {
   grid-row: 2;
   grid-column: 2;
 }
-
-.tracks-container .track-container:nth-child(4n+3) .track-sessions {
+.tracks-container .track-container:nth-child(4n + 3) .track-sessions {
   grid-row: 2;
   grid-column: 3;
 }
-
-.tracks-container .track-container:nth-child(4n+4) .track-sessions {
+.tracks-container .track-container:nth-child(4n + 4) .track-sessions {
   grid-row: 2;
   grid-column: 4;
 }

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, toRefs } from "vue";
+import { provide, ref, toRefs } from "vue";
 import { useClassBinding } from "../../../composables/useClassBinding";
 import type { AgendaListAccordionClassObj } from "../../../@types/components";
 
@@ -40,6 +40,8 @@ const toggle = () => {
     emit("expanded", 0);
   }
 };
+
+provide('isExpanded', expanded);
 </script>
 
 <template>
@@ -51,11 +53,14 @@ const toggle = () => {
         :class="classBinding(classObject, 'headerButton', 'outline-none')"
         @click="toggle"
       >
-        <slot name="header"></slot>
+        <slot name="header" />
       </button>
     </div>
 
-    <transition name="slide" mode="out-in">
+    <transition
+      name="slide"
+      mode="out-in"
+    >
       <div
         v-show="expanded"
         :class="classBinding(classObject, 'dropdownContainer', '')"

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, toRefs, computed } from "vue";
+import { toRefs, computed } from "vue";
 import { storeToRefs } from "pinia";
 import { useTemplateConfigsStore } from "../../../store";
 import { usePresentation } from "../../../composables/usePresentation";
@@ -27,14 +27,14 @@ const showAddToMicrosoftCalendar = computed((): boolean => {
   return pagesConfigValue.value("agenda.add_to_microsoft_calendar", false);
 });
 const calendarOptions = computed((): string => {
-  let opts = [];
-  if (showAddToGoogleCalendar) {
+  const opts = [];
+  if (showAddToGoogleCalendar.value) {
     opts.push("Google");
   }
-  if (showAddToMicrosoftCalendar) {
+  if (showAddToMicrosoftCalendar.value) {
     opts.push("iCal");
   }
-  let optsQuoted = opts.map((opt) => `'${opt}'`);
+  const optsQuoted = opts.map((opt) => `'${opt}'`);
   return optsQuoted.join(",");
 });
 const cssPath = computed((): string => {
@@ -53,20 +53,20 @@ const cssPath = computed((): string => {
     <add-to-calendar-button
       :name="presentation.name"
       :description="presentation.description"
-      :startDate="getPresentationStartTime(presentation,'yyyy-MM-dd',false)"
-      :startTime="getPresentationStartTime(presentation,'HH:mm',false)"
-      :endTime="getPresentationEndTime(presentation,'HH:mm',false)"
-      :timeZone="conference.timezone"
+      :start-date="getPresentationStartTime(presentation,'yyyy-MM-dd',false)"
+      :start-time="getPresentationStartTime(presentation,'HH:mm',false)"
+      :end-time="getPresentationEndTime(presentation,'HH:mm',false)"
+      :time-zone="conference.timezone"
       :location="conference.location"
-      listStyle="dropdown"
+      list-style="dropdown"
       trigger="click"
-      lightMode="bodyScheme"
-      buttonStyle="custom"
-      :customCss="cssPath"
-      hideIconButton
-      hideBackground
-      hideCheckmark
+      light-mode="bodyScheme"
+      button-style="custom"
+      :custom-css="cssPath"
+      hide-icon-button
+      hide-background
+      hide-checkmark
       :options="calendarOptions"
     />
   </div>
-</template>
+</template>

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

@@ -35,10 +35,12 @@ const favoriteStatusIcon = computed((): keyof Icons => {
   </a>
 </template>
   
-<style scoped>
-.favorite svg {
-  stroke: #0070FF;
-  fill: blue;
-}
+<style lang="postcss" scoped>
+  .favorite {
+    svg {
+      stroke: #0070FF;
+      fill: blue;
+    }
+  }
 </style>
   

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

@@ -26,20 +26,30 @@ const getLinkText = computed(() => {
 
 <template>
   <span>
-    <a class="cursor-pointer" @click="showDescModal = true">
+    <a
+      class="cursor-pointer"
+      @click="showDescModal = true"
+    >
       <CommonSvgIcon
         v-if="useIcon"
         icon="info"
         class="align-middle"
         style="display: inline-block; margin-bottom: 2px"
         :icon-width="'16px'"
-      ></CommonSvgIcon>
-      <span v-else class="text-xs" :class="{ 'new-line': newLine }">{{
+      />
+      <span
+        v-else
+        class="text-xs"
+        :class="{ 'new-line': newLine }"
+      >{{
         getLinkText
       }}</span>
     </a>
 
-    <CommonModal :visible="showDescModal" @trigger="showDescModal = false">
+    <CommonModal
+      :visible="showDescModal"
+      @trigger="showDescModal = false"
+    >
       <template #modal-title>
         <div class="text-lg font-bold text-left mb-4 pb-4 border-b">
           {{ presentation.name }}
@@ -49,7 +59,7 @@ const getLinkText = computed(() => {
         <div
           class="text-base font-normal text-left"
           v-html="presentation.description"
-        ></div>
+        />
       </template>
     </CommonModal>
   </span>

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

@@ -31,16 +31,14 @@ const {
         style="max-width: 15px"
         :src="(getPresentationCustomPlayIcon(presentation) as unknown as string)"
         alt=""
-      />
+      >
       <CommonSvgIcon
         v-else
         :icon="icon"
         class="align-middle mr-1"
         style="display: inline-block; margin-bottom: 2px"
         :icon-width="'20px'"
-      >
-      </CommonSvgIcon
-      >&nbsp;
+      />&nbsp;
     </span>
     <small class="flex-initial uppercase text-base text-red-800">{{
       getPresentationStreamingText(presentation)

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

@@ -59,26 +59,28 @@ const presentationNameClass = computed(() => {
     <div v-if="!simpleLayout">
       <!-- LIVE AGENDA GO TO WEBCAST PAGE -->
       <div>
-        <h2 class="flex flex-initial flex-row" :class="presentationNameClass">
+        <h2
+          class="flex flex-initial flex-row"
+          :class="presentationNameClass"
+        >
           <!-- zoom text & icon link -->
           <CommonZoomModal
             v-if="
               isAgenda &&
-              conferenceIsLiveOrMixed(conference) &&
-              presentation.type == 'zoom'
+                conferenceIsLiveOrMixed(conference) &&
+                presentation.type == 'zoom'
             "
             :presentation-id="presentation.id"
             modal-size="full"
           >
             <template #modal-link>
-              <span class="font-semibold heading-link"
-                >{{ presentation.name }}
+              <span class="font-semibold heading-link">{{ presentation.name }}
                 <PlayIcon
                   :presentation="presentation"
                   :conference="conference"
                   :class="'justify-center md:justify-start'"
                   icon="zoom"
-                ></PlayIcon>
+                />
               </span>
             </template>
           </CommonZoomModal>
@@ -96,9 +98,10 @@ const presentationNameClass = computed(() => {
           > -->
           <!-- TODO - ensure this conversion to <button> does not compromise behavior on other templates -->
           <!-- is not a11y compliant, though. would be better if it was button on tradeshow template only -->
-          <button v-else-if="(isAgenda && conferenceIsLiveOrMixed(conference)) ||
+          <button
+            v-else-if="(isAgenda && conferenceIsLiveOrMixed(conference)) ||
               (conferenceIsArchived(conference) && presentation.type != 'zoom')"
-              @click="playPresentation(track, presentation, conference, isActiveAgenda, isVirtual)"
+            @click="playPresentation(track, presentation, conference, isActiveAgenda, isVirtual)"
           >
             {{ presentation.name }}
             <transition name="fade">
@@ -114,7 +117,11 @@ const presentationNameClass = computed(() => {
           <!-- </a> -->
 
           <!-- text only catchall -->
-          <span v-else class="font-semibold" :class="presentationNameClass">
+          <span
+            v-else
+            class="font-semibold"
+            :class="presentationNameClass"
+          >
             {{ presentation.name }}
           </span>
 

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

@@ -81,10 +81,10 @@ const handleClick = () => {
           :class="
             inline
               ? classBinding(
-                  classObject,
-                  'sponsorLabel',
-                  'inline-block lg:pr-5 pb-2 lg:pb-0'
-                )
+                classObject,
+                'sponsorLabel',
+                'inline-block lg:pr-5 pb-2 lg:pb-0'
+              )
               : classBinding(classObject, 'sponsorLabel', 'pb-2')
           "
           class="text-center uppercase font-medium"
@@ -96,10 +96,10 @@ const handleClick = () => {
         :class="
           inline
             ? classBinding(
-                classObject,
-                'imageContainer',
-                'flex-1 items-center pb-2 lg:pb-0'
-              )
+              classObject,
+              'imageContainer',
+              'flex-1 items-center pb-2 lg:pb-0'
+            )
             : classBinding(classObject, 'imageContainer', 'w-full')
         "
       >
@@ -114,7 +114,7 @@ const handleClick = () => {
           ]"
           :src="sponsor.photo"
           @click="handleClick()"
-        />
+        >
       </div>
     </div>
 
@@ -123,31 +123,38 @@ const handleClick = () => {
         <CommonAffiliatePage
           v-if="enabledSponsor"
           :affiliate="enabledSponsor"
-        ></CommonAffiliatePage>
+        />
       </template>
     </CommonModal>
   </div>
 </template>
 
-<style>
-.small h2 {
-  font-size: 14px;
-}
-.small img {
-  max-height: 35px !important;
-}
+<style lang="postcss">
+.small {
+  h2 {
+    font-size: 14px;
+  }
 
-.medium h2 {
-  font-size: 0.9em;
+  img {
+    max-height: 35px !important;
+  }
 }
-.medium img {
-  max-height: 40px;
+
+.medium {
+  h2 {
+    font-size: 0.9em;
+  }
+
+  img {
+    max-height: 40px;
+  }
 }
 
 .default {
   width: 100%;
-}
-.default img {
-  max-height: 60px;
+
+  img {
+    max-height: 60px;
+  }
 }
 </style>

package/dist/runtime/components/auth/PasswordReset.vue

@@ -42,16 +42,31 @@ const submitPasswordReset = () => {
 
 <template>
   <div :class="isCentered ? 'w-full max-w-xs mx-auto' : ''">
-    <div class="mb-4">Enter your email address to reset your password.</div>
-    <CommonMessage v-if="message" :success="true">
+    <div class="mb-4">
+      Enter your email address to reset your password.
+    </div>
+    <CommonMessage
+      v-if="message"
+      :success="true"
+    >
       {{ message }}
     </CommonMessage>
-    <CommonMessage v-if="errors.length > 0" :success="false">
+    <CommonMessage
+      v-if="errors.length > 0"
+      :success="false"
+    >
       {{ errors[0] }}
     </CommonMessage>
     <div @keyup.enter="submitPasswordReset()">
-      <CommonTextInput v-model="email" placeholder="Email" type="email" />
-      <button class="btn my-2" @click="submitPasswordReset()">
+      <CommonTextInput
+        v-model="email"
+        placeholder="Email"
+        type="email"
+      />
+      <button
+        class="btn my-2"
+        @click="submitPasswordReset()"
+      >
         <span v-if="loading">Processing...</span>
         <span v-else>Send Password Reset Link</span>
       </button>

package/dist/runtime/components/auth/Registration.vue

@@ -13,14 +13,24 @@ const submitRegistration = () => {};
 
 <template>
   <div v-if="isLoggedIn">
-    <CommonMessage :success="false">Already logged in.</CommonMessage>
+    <CommonMessage :success="false">
+      Already logged in.
+    </CommonMessage>
   </div>
-  <div v-else class="px-2">
+  <div
+    v-else
+    class="px-2"
+  >
     <div class="flex flex-1 flex-col text-center pt-8">
-      <h1 class="mb-3 heading-color-3">Log In</h1>
+      <h1 class="mb-3 heading-color-3">
+        Log In
+      </h1>
 
       <div class="w-full max-w-xs mx-auto pb-12">
-        <form class="w-full" @submit.prevent="submitRegistration"></form>
+        <form
+          class="w-full"
+          @submit.prevent="submitRegistration"
+        />
       </div>
     </div>
   </div>