@icvdeveloper/common-module 1.4.14 → 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

@@ -3,13 +3,9 @@ import { toRefs, computed } from "vue";
 import { get } from "lodash-es";
 import { DateTime } from "luxon";
 import { useAgenda } from "../../composables/useAgenda";
-import type { Conference, Sponsor as SponsorType } from "../../models/conference";
 import { usePresentation } from "../../composables/usePresentation";
 import { usePresenters } from "../../composables/usePresenters";
-import CommonAccordion from "../layouts/Accordion.vue";
-import Sponsor from "./components/Sponsor.vue";
-import PresentationLink from "./components/PresentationLink.vue";
-import Calendar from "./components/Calendar.vue";
+import type { Conference, Day, Presenter, Sponsor as SponsorType } from "../../models/conference";
 
 type Props = {
   conference: Conference;
@@ -56,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">
@@ -67,7 +66,7 @@ const presentersContainer = computed(() => {
           <button
             v-for="(day, index) in days"
             :key="index"
-            class="flex-1 md:flex-initial py-5 px-4 md:px-6 text-base text-center cursor-pointer no-underline heading-color-2 focus:outline-none agenda-tab"
+            class="flex-1 md:flex-initial py-5 px-4 md:px-6 text-base text-center cursor-pointer heading-color-2 focus:outline-none agenda-tab"
             :class="{
               'agenda-tab-active-bg-color agenda-tab-color':
                 day === selectedDay,
@@ -76,8 +75,8 @@ const presentersContainer = computed(() => {
             @click="setSelectedDay(day)"
           >
             {{ day.name }}
-            <small v-if="showTabDates(day)">{{ 
-              DateTime.fromSQL(day.date, { zone: conference.timezone }).toFormat("MMMM d, yyyy")
+            <small v-if="showTabDates(day)">{{
+              DateTime.fromSQL(day?.date as string, { zone: conference.timezone }).toFormat("MMMM d, yyyy")
             }}</small>
           </button>
         </div>
@@ -85,15 +84,14 @@ const presentersContainer = computed(() => {
         <div
           class="flex w-1/4 items-center agenda-tab-sponsor-bg-color flex-row-reverse pr-5"
         >
-          <Sponsor
-            v-if="shouldShowSponsors(selectedDay)"
-            :sponsor="selectedDay.sponsors[0]"
+          <CommonComponentsSponsor
+            v-if="shouldShowSponsors(selectedDay as Day)"
+            :sponsor="selectedDay?.sponsors[0] as SponsorType"
             :show-label="false"
             size="small"
             :enabled-sponsors="enabledSponsors"
             class="agenda-day-sponsor"
-          >
-          </Sponsor>
+          />
         </div>
       </div>
     </div>
@@ -126,12 +124,13 @@ const presentersContainer = computed(() => {
           <!-- TRACK + SESSIONS CONTAINER -->
           <div
             v-for="(track, trackIndex) in getTracks(group_or_track)"
-            :key="track.id"
-            :id="(group_or_track.type == 'track_group') ? 
-              'agenda-track-group-'+group_or_track.id :
-              'agenda-track-'+group_or_track.id
+            :id="
+              (group_or_track.type == 'track_group') ?
+                'agenda-track-group-'+group_or_track.id :
+                'agenda-track-'+group_or_track.id
             "
-            :class="(group_or_track.type == 'track_group') ? 
+            :key="track.id"
+            :class="(group_or_track.type == 'track_group') ?
               'agenda-track-group' :
               'agenda-track'
             "
@@ -148,7 +147,7 @@ const presentersContainer = computed(() => {
                 :class="{
                   'lg:w-3/4':
                     !isSmallGroupedTrack(group_or_track) &&
-                    track.sponsors.length,
+                    track?.sponsors?.length,
                 }"
               >
                 <h2
@@ -163,22 +162,21 @@ const presentersContainer = computed(() => {
               </div>
               <!-- TRACK SPONSOR -->
               <div
-                v-if="track.sponsors.length"
+                v-if="track != undefined && track?.sponsors?.length"
                 class="flex w-full pb-2 content-center items-center"
                 :class="{
                   'lg:pb-0 lg:w-1/4 lg:pr-5':
                     !isSmallGroupedTrack(group_or_track),
                 }"
               >
-                <sponsor
+                <CommonComponentsSponsor
                   v-if="shouldShowSponsors(track)"
-                  :sponsor="track.sponsors[0]"
+                  :sponsor="track?.sponsors[0]"
                   :inline="true"
                   size="small"
                   :enabled-sponsors="enabledSponsors"
                   class="agenda-track-sponsor"
-                >
-                </sponsor>
+                />
               </div>
             </div>
             <!-- ALL TRACK SESSIONS -->
@@ -192,7 +190,7 @@ const presentersContainer = computed(() => {
                 :key="presentation.id"
               >
                 <div
-                  v-if="presentation.visible"
+                  v-if="presentation != undefined && presentation.visible"
                   :id="'agenda-presentation-'+presentation.id"
                   class="agenda-presentation flex flex-col"
                   :class="
@@ -230,12 +228,12 @@ const presentersContainer = computed(() => {
                           getPresentationStartTime(presentation, "h:mm a")
                         }}
 
-                        <span v-if="showPresentationEndTimes()"
-                          >- {{ getPresentationEndTime(presentation, "h:mm a") }}</span
-                        >
+                        <span v-if="showPresentationEndTimes()">
+                          - {{ getPresentationEndTime(presentation, "h:mm a") }}
+                        </span>
                         {{
                           DateTime.fromSQL(
-                            presentation.date,
+                            presentation?.date as string,
                             { zone: conference.timezone }
                           ).toLocal().offsetNameShort
                         }}
@@ -243,7 +241,7 @@ const presentersContainer = computed(() => {
 
                       <!-- NAME + PLAY BUTTON -->
                       <div class="pb-1">
-                        <presentation-link
+                        <CommonComponentsPresentationLink
                           :conference="conference"
                           :track="track"
                           :presentation="presentation"
@@ -253,46 +251,60 @@ const presentersContainer = computed(() => {
                           "
                           :is-agenda="true"
                           class="agenda-presentation-link"
-                        ></presentation-link>
+                        />
                       </div>
 
                       <!-- ADD TO CALENDAR -->
-                      <calendar
+                      <!-- <CommonComponentsCalendar
                         :key="conference.id"
                         class="agenda-add-to-calendar mb-3"
                         :presentation="presentation"
                         :conference="conference"
-                      />
+                      /> -->
 
                       <!-- PRESENTERS LIST (ACCORDION OR STANDARD/DIV) -->
                       <component
                         :is="presentersContainer"
                         v-if="get(presentation, 'presenters.length') > 0"
                         :title="
-                          getPresentersLabel(presentation.presenters.length)
+                          presentation.presenters != undefined ?
+                            getPresentersLabel(presentation.presenters.length) :
+                            'Presenters'
                         "
                         class="agenda-presenters"
                       >
                         <p
                           v-for="presenter in getSortedPresenters(
-                            presentation.presenters
+                            presentation?.presenters as Presenter[]
                           )"
-                          :key="presenter.id"
                           :id="'agenda-presenter-'+presenter.id"
+                          :key="presenter.id"
                           :class="(presenter.role == 'moderator') ? ' agenda-moderator' : ''"
                           class="agenda-presenter font-bold my-1"
                         >
                           <CommonPresenterModal
-                            v-if="usePresenterModal"
+                            v-if="usePresenterModal()"
                             :use-icon="false"
+                            :show-img="true"
                             :presenter="presenter"
                             :is-small-grouped-track="
                               isSmallGroupedTrack(group_or_track)
                             "
-                          ></CommonPresenterModal>
+                            :class-object="{
+                              components: {
+                                presenterListing: {
+                                  presenterContainer:
+                                    'flex flex-row flex-1 content-center items-start',
+                                  presenterImageContainer: 'shrink pr-2 my-1',
+                                  presenterImage: 'max-w-32',
+                                },
+                              },
+                            }"
+                          />
                           <CommonPresenterListing
                             v-else
                             :presenter="presenter"
+                            :show-img="true"
                             :enable-bio="true"
                             :show-bio="false"
                             text-class="font-bold text-base"
@@ -318,7 +330,7 @@ const presentersContainer = computed(() => {
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .tracks-container {
   display: grid;
   grid-auto-columns: 1fr;
@@ -328,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,9 +1,9 @@
 <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";
-import "add-to-calendar-button";
+import "../../../../../node_modules/add-to-calendar-button";
 import type { Conference } from "../../../models/conference";
 import type { Presentation } from "../../../models/conference";
 type Props = {
@@ -27,20 +27,25 @@ 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 => {
   // atcb.css required in template/playground public folder
   return window.location.origin + "/atcb.css";
 });
+
+// TODO - this *almost* works - the div classed "atcb-initialized" does not get its inline styles updated in order to display the button.
+// Classes are not loading, as the stylesheet in playground/public/atcb.css does not have the right MIME type when loading.
+// When the previously-mentioned div is visible, the button works (it's just unstyled)
+
 </script>
 
 <template>
@@ -48,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"
-    ></add-to-calendar-button>
+    />
   </div>
 </template>

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

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { toRefs, computed } from 'vue';
+import { useConversationStore } from '../../../store/conversations';
+import type { Icons } from '../../../models/icons';
+import type { Presentation } from '../../../models/conference';
+type Props = {
+    presentation: Presentation
+};
+
+const props = defineProps<Props>();
+
+const { presentation } = toRefs(props);
+
+const { hasFavorite } = useConversationStore();
+
+const emit = defineEmits<{
+    (event: 'favoriteClick', presentation: Presentation): void;
+}>();
+
+// computed
+const favoriteStatusIcon = computed((): keyof Icons => {
+    return hasFavorite(presentation.value.id as number) !== undefined ? 'favoriteFilled' : 'favorite';
+});
+
+
+</script>
+
+<template>
+  <a @click="emit('favoriteClick', presentation)">
+    <CommonSvgIcon
+      :icon="favoriteStatusIcon"
+      class="cursor-pointer"
+      style="display: inline-block;"
+    />
+  </a>
+</template>
+  
+<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,18 +31,16 @@ 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-darker">{{
+    <small class="flex-initial uppercase text-base text-red-800">{{
       getPresentationStreamingText(presentation)
     }}</small>
   </span>