@icvdeveloper/common-module 0.0.112 → 0.0.114

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

@@ -1,273 +1,273 @@
-<script lang="ts" setup>
-import { ref, toRefs } from "vue";
-import { add } from "date-fns";
-import type { Conference } from "../../models/conference";
-import { useAgenda } from "../../composables/useAgenda";
-import { useDateFormat } from "../../composables/useDateFormat";
-import { usePresenter } from "../../composables/usePresenter";
-import { useClassBinding } from "../../composables/useClassBinding";
-import { Presenter } from "../../models/conference";
-import {
-  AgendaListClassObj,
-  AgendaListCompObj,
-  AgendaListAccordionClassObj,
-} from "../../@types/components";
-import AgendaAccordion from "./components/AgendaListAccordion.vue";
-import Calendar from "./components/Calendar.vue";
-
-type Props = {
-  conference: Conference;
-  useCalendar?: boolean;
-  classObject?: AgendaListClassObj;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  useCalendar: true,
-  classObject: () => {
-    return {
-      container: "",
-      accordionContainer: "",
-      titleContainer: "",
-      timeElement: "",
-      iconTextElement: "",
-      iconElement: "",
-      iconWidth: "20px",
-      dropdownContainer: "",
-      marginElement: "",
-      presentersContainer: "",
-      presentersHeader: "",
-      presenterListContainer: "",
-      presenterElement: "",
-      presenterName: "",
-      presenterTitle: "",
-      components: ref<AgendaListCompObj>({
-        agendaListAccordion: ref<AgendaListAccordionClassObj>({}),
-      }),
-    };
-  },
-});
-
-const { conference } = toRefs(props);
-
-const { days, getCombinedTrackList } = useAgenda(conference);
-const { formatTimezoneToLocal } = useDateFormat();
-const { classBinding } = useClassBinding();
-
-// data
-const presentersToComposables = (presenters: Presenter[]) => {
-  const data = [];
-
-  presenters.forEach((presenter) => {
-    data.push({
-      presenter,
-      ...usePresenter(presenter),
-    });
-  });
-
-  return data;
-};
-
-const expandedPres = ref<number>(0);
-
-// methods
-const setPres = (_expanded: number) => {
-  expandedPres.value = _expanded;
-};
-
-const logPres = (_presId: number, _expanded: number) => {
-  console.log(_presId, typeof _presId);
-};
-
-const isPres = (_presId: number): boolean => {
-  return expandedPres.value === _presId;
-};
-</script>
-
-<template>
-  <div
-    :class="
-      classBinding(
-        classObject,
-        'container',
-        'flex flex-col space-y-5 text-neutral-700'
-      )
-    "
-  >
-    <template v-for="day in days">
-      <template v-for="track in getCombinedTrackList(day)">
-        <div
-          v-for="presentation in track.presentations"
-          :key="presentation.id"
-          :class="classBinding(classObject, 'accordionContainer', '')"
-        >
-          <AgendaAccordion
-            :item-id="presentation.id"
-            :class-object="classObject.components.agendaListAccordion"
-            @expanded="setPres"
-          >
-            <template #header="isExpanded">
-              <div
-                :class="
-                  classBinding(
-                    classObject,
-                    'titleContainer',
-                    'text-left text-xl flex-col md:flex-row flex'
-                  )
-                "
-              >
-                <span
-                  :class="
-                    classBinding(classObject, 'timeElement', 'time-width')
-                  "
-                >
-                  {{
-                    formatTimezoneToLocal(
-                      presentation.date,
-                      "h:mm",
-                      conference.timezone
-                    )
-                  }}
-                  -
-                  {{
-                    formatTimezoneToLocal(
-                      add(new Date(presentation.date), {
-                        seconds: presentation.duration,
-                      }),
-                      "h:mm",
-                      conference.timezone
-                    )
-                  }}
-                </span>
-                <span
-                  :class="
-                    classBinding(
-                      classObject,
-                      'iconTextElement',
-                      'flex flex-row md:ml-5'
-                    )
-                  "
-                >
-                  <CommonSvgIcon
-                    v-if="!isPres(presentation.id)"
-                    :class-object="{ svgElement: 'fill-neutral-700' }"
-                    :class="
-                      classBinding(classObject, 'iconElement', 'mr-1 pt-1')
-                    "
-                    icon="circlePlus"
-                    :width="classObject.iconWidth"
-                  />
-                  <CommonSvgIcon
-                    v-else
-                    :class-object="{ svgElement: 'fill-neutral-700' }"
-                    :class="
-                      classBinding(classObject, 'iconElement', 'mr-1 pt-1')
-                    "
-                    icon="circleMinus"
-                    :width="classObject.iconWidth"
-                  />
-                  {{ presentation.name }}
-                </span>
-              </div>
-            </template>
-            <template #body>
-              <div
-                :class="
-                  classBinding(
-                    classObject,
-                    'dropdownContainer',
-                    'flex flex-row'
-                  )
-                "
-              >
-                <!-- left margin element -->
-                <span
-                  :class="
-                    classBinding(
-                      classObject,
-                      'marginElement',
-                      'text-lg hidden md:block md:flex-initial time-width md:mr-8'
-                    )
-                  "
-                />
-                <div
-                  :class="
-                    classBinding(
-                      classObject,
-                      'presentersContainer',
-                      'flex-1 my-3'
-                    )
-                  "
-                >
-                  <!-- ADD TO CALENDAR -->
-                  <calendar
-                    v-if="useCalendar"
-                    :key="conference.id"
-                    class="mb-3"
-                    :presentation="presentation"
-                    :conference="conference"
-                  />
-                  <h3
-                    :class="
-                      classBinding(
-                        classObject,
-                        'presentersHeader',
-                        'font-bold text-lg'
-                      )
-                    "
-                  >
-                    Presenters
-                  </h3>
-                  <div
-                    :class="
-                      classBinding(
-                        classObject,
-                        'presenterListContainer',
-                        'flex flex-col space-y-3'
-                      )
-                    "
-                  >
-                    <div
-                      v-for="presenter in presentersToComposables(
-                        presentation.presenters
-                      )"
-                      :key="presenter.presenter.id"
-                      :class="classBinding(classObject, 'presenterElement', '')"
-                    >
-                      <p
-                        :class="
-                          classBinding(
-                            classObject,
-                            'presenterName',
-                            'text-lg pb-0 mb-0'
-                          )
-                        "
-                      >
-                        {{ presenter.fullName.value }}
-                      </p>
-                      <p
-                        v-if="presenter.titleCompany.value"
-                        :class="
-                          classBinding(
-                            classObject,
-                            'presenterTitle',
-                            'text-sm pt-0 mb-1'
-                          )
-                        "
-                      >
-                        {{ presenter.titleCompany.value }}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </AgendaAccordion>
-        </div>
-      </template>
-    </template>
-  </div>
-</template>
-
+<script lang="ts" setup>
+import { ref, toRefs } from "vue";
+import { add } from "date-fns";
+import type { Conference } from "../../models/conference";
+import { useAgenda } from "../../composables/useAgenda";
+import { useDateFormat } from "../../composables/useDateFormat";
+import { usePresenter } from "../../composables/usePresenter";
+import { useClassBinding } from "../../composables/useClassBinding";
+import { Presenter } from "../../models/conference";
+import {
+  AgendaListClassObj,
+  AgendaListCompObj,
+  AgendaListAccordionClassObj,
+} from "../../@types/components";
+import AgendaAccordion from "./components/AgendaListAccordion.vue";
+import Calendar from "./components/Calendar.vue";
+
+type Props = {
+  conference: Conference;
+  useCalendar?: boolean;
+  classObject?: AgendaListClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  useCalendar: true,
+  classObject: () => {
+    return {
+      container: "",
+      accordionContainer: "",
+      titleContainer: "",
+      timeElement: "",
+      iconTextElement: "",
+      iconElement: "",
+      iconWidth: "20px",
+      dropdownContainer: "",
+      marginElement: "",
+      presentersContainer: "",
+      presentersHeader: "",
+      presenterListContainer: "",
+      presenterElement: "",
+      presenterName: "",
+      presenterTitle: "",
+      components: ref<AgendaListCompObj>({
+        agendaListAccordion: ref<AgendaListAccordionClassObj>({}),
+      }),
+    };
+  },
+});
+
+const { conference } = toRefs(props);
+
+const { days, getCombinedTrackList } = useAgenda(conference);
+const { formatTimezoneToLocal } = useDateFormat();
+const { classBinding } = useClassBinding();
+
+// data
+const presentersToComposables = (presenters: Presenter[]) => {
+  const data = [];
+
+  presenters.forEach((presenter) => {
+    data.push({
+      presenter,
+      ...usePresenter(presenter),
+    });
+  });
+
+  return data;
+};
+
+const expandedPres = ref<number>(0);
+
+// methods
+const setPres = (_expanded: number) => {
+  expandedPres.value = _expanded;
+};
+
+const logPres = (_presId: number, _expanded: number) => {
+  console.log(_presId, typeof _presId);
+};
+
+const isPres = (_presId: number): boolean => {
+  return expandedPres.value === _presId;
+};
+</script>
+
+<template>
+  <div
+    :class="
+      classBinding(
+        classObject,
+        'container',
+        'flex flex-col space-y-5 text-neutral-700'
+      )
+    "
+  >
+    <template v-for="day in days">
+      <template v-for="track in getCombinedTrackList(day)">
+        <div
+          v-for="presentation in track.presentations"
+          :key="presentation.id"
+          :class="classBinding(classObject, 'accordionContainer', '')"
+        >
+          <AgendaAccordion
+            :item-id="presentation.id"
+            :class-object="classObject.components.agendaListAccordion"
+            @expanded="setPres"
+          >
+            <template #header="isExpanded">
+              <div
+                :class="
+                  classBinding(
+                    classObject,
+                    'titleContainer',
+                    'text-left text-xl flex-col md:flex-row flex'
+                  )
+                "
+              >
+                <span
+                  :class="
+                    classBinding(classObject, 'timeElement', 'time-width')
+                  "
+                >
+                  {{
+                    formatTimezoneToLocal(
+                      presentation.date,
+                      "h:mm",
+                      conference.timezone
+                    )
+                  }}
+                  -
+                  {{
+                    formatTimezoneToLocal(
+                      add(new Date(presentation.date), {
+                        seconds: presentation.duration,
+                      }),
+                      "h:mm",
+                      conference.timezone
+                    )
+                  }}
+                </span>
+                <span
+                  :class="
+                    classBinding(
+                      classObject,
+                      'iconTextElement',
+                      'flex flex-row md:ml-5'
+                    )
+                  "
+                >
+                  <CommonSvgIcon
+                    v-if="!isPres(presentation.id)"
+                    :class-object="{ svgElement: 'fill-neutral-700' }"
+                    :class="
+                      classBinding(classObject, 'iconElement', 'mr-1 pt-1')
+                    "
+                    icon="circlePlus"
+                    :width="classObject.iconWidth"
+                  />
+                  <CommonSvgIcon
+                    v-else
+                    :class-object="{ svgElement: 'fill-neutral-700' }"
+                    :class="
+                      classBinding(classObject, 'iconElement', 'mr-1 pt-1')
+                    "
+                    icon="circleMinus"
+                    :width="classObject.iconWidth"
+                  />
+                  {{ presentation.name }}
+                </span>
+              </div>
+            </template>
+            <template #body>
+              <div
+                :class="
+                  classBinding(
+                    classObject,
+                    'dropdownContainer',
+                    'flex flex-row'
+                  )
+                "
+              >
+                <!-- left margin element -->
+                <span
+                  :class="
+                    classBinding(
+                      classObject,
+                      'marginElement',
+                      'text-lg hidden md:block md:flex-initial time-width md:mr-8'
+                    )
+                  "
+                />
+                <div
+                  :class="
+                    classBinding(
+                      classObject,
+                      'presentersContainer',
+                      'flex-1 my-3'
+                    )
+                  "
+                >
+                  <!-- ADD TO CALENDAR -->
+                  <calendar
+                    v-if="useCalendar"
+                    :key="conference.id"
+                    class="mb-3"
+                    :presentation="presentation"
+                    :conference="conference"
+                  />
+                  <h3
+                    :class="
+                      classBinding(
+                        classObject,
+                        'presentersHeader',
+                        'font-bold text-lg'
+                      )
+                    "
+                  >
+                    Presenters
+                  </h3>
+                  <div
+                    :class="
+                      classBinding(
+                        classObject,
+                        'presenterListContainer',
+                        'flex flex-col space-y-3'
+                      )
+                    "
+                  >
+                    <div
+                      v-for="presenter in presentersToComposables(
+                        presentation.presenters
+                      )"
+                      :key="presenter.presenter.id"
+                      :class="classBinding(classObject, 'presenterElement', '')"
+                    >
+                      <p
+                        :class="
+                          classBinding(
+                            classObject,
+                            'presenterName',
+                            'text-lg pb-0 mb-0'
+                          )
+                        "
+                      >
+                        {{ presenter.fullName.value }}
+                      </p>
+                      <p
+                        v-if="presenter.titleCompany.value"
+                        :class="
+                          classBinding(
+                            classObject,
+                            'presenterTitle',
+                            'text-sm pt-0 mb-1'
+                          )
+                        "
+                      >
+                        {{ presenter.titleCompany.value }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </AgendaAccordion>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+
 <style>
 .accord {
   transition: height var(--vc-auto-duration) ease-out;
@@ -276,4 +276,4 @@ const isPres = (_presId: number): boolean => {
 .time-width {
   min-width: 10ch;
 }
-</style>
+</style>