@icvdeveloper/common-module 0.0.33 → 0.0.36

package/dist/module.json

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

package/dist/runtime/@types/components.d.ts

@@ -0,0 +1,60 @@
+export declare type countdownTimerClassObj = {
+    container?: string | null;
+    countdownContainer?: string | null;
+    beginText?: string | null;
+    unitsContainer?: string | null;
+    itemContainer?: string | null;
+    unitLabel?: string | null;
+    unitContainer?: string | null;
+    unit?: string | null;
+};
+export declare type sponsorClassObj = {
+    container?: string | null;
+    sponsorContainer?: string | null;
+    labelImageContainer?: string | null;
+    labelContainer?: string | null;
+    sponsorLabel?: string | null;
+    imageContainer?: string | null;
+    sponsorImage?: string | null;
+};
+export declare type listEventsCompObj = {
+    countdownTimer?: countdownTimerClassObj | null;
+    sponsor?: sponsorClassObj | null;
+    modal?: string | null;
+    login?: string | null;
+};
+export declare type listEventsClassObj = {
+    container?: string | null;
+    listContainer?: string | null;
+    eventContainer?: string | null;
+    eventImageContainer?: string | null;
+    eventImage?: string | null;
+    eventContentContainer?: string | null;
+    eventDetailsContainer?: string | null;
+    eventDetails?: string | null;
+    eventBrand?: string | null;
+    eventName?: string | null;
+    eventDate?: string | null;
+    countdownContainerTop?: string | null;
+    countdownContainerRight?: string | null;
+    countdownContainerBottom?: string | null;
+    buttonCountdownSponsorsContainer?: string | null;
+    buttonCountdownContainer?: string | null;
+    buttonContainer?: string | null;
+    buttonItem?: string | null;
+    sponsorsContainer?: string | null;
+    components?: listEventsCompObj;
+};
+export declare type presenterListingClassObj = {
+    container?: string | null;
+    presenterImageContainer?: string | null;
+    presenterImage?: string | null;
+    presenterContainer?: string | null;
+    presenterTextContainer?: string | null;
+    presenterNameLink?: string | null;
+    presenterName?: string | null;
+    presenterRole?: string | null;
+    presenterTitle?: string | null;
+    presenterBio?: string | null;
+    presenterBioLink?: string | null;
+};

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

@@ -2,6 +2,8 @@
 import { find } from "lodash-es";
 import { ref, toRefs } from "vue";
 import { Sponsor as SponsorModel } from "../../../models/conference";
+import { sponsorClassObj } from "../../../@types/components";
+import { useClassBinding } from "../../../composables/useClassBinding";
 
 type Props = {
   sponsor: SponsorModel;
@@ -9,18 +11,32 @@ type Props = {
   inline?: boolean;
   hideLabel?: boolean;
   enabledSponsors?: SponsorModel[];
+  classObject?: sponsorClassObj;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   size: "default",
   inline: false,
-  hideLabel: false,
+  hideLabel: true,
   enabledSponsors: () => {
     return [];
   },
+  classObject: () => {
+    return {
+      container: "",
+      sponsorContainer: "",
+      labelImageContainer: "",
+      labelContainer: "",
+      sponsorLabel: "",
+      imageContainer: "",
+      sponsorImage: "",
+    };
+  },
 });
 
-const { sponsor, size, inline, hideLabel, enabledSponsors } = toRefs(props);
+const { sponsor, size, inline, hideLabel, enabledSponsors, classObject } =
+  toRefs(props);
+const { classBinding } = useClassBinding();
 
 // data
 const showModal = ref<boolean>(false);
@@ -43,24 +59,59 @@ const handleClick = () => {
 </script>
 
 <template>
-  <div class="flex flex-col lg:flex-row flex-1 items-center">
-    <div :class="size">
-      <div :class="inline ? 'flex-1 items-center' : 'w-full'">
+  <div
+    :class="
+      classBinding(
+        classObject,
+        'sponsorContainer',
+        'flex flex-col lg:flex-row flex-1 items-center'
+      )
+    "
+  >
+    <div :class="classBinding(classObject, 'labelImageContainer', size)">
+      <div
+        v-if="!hideLabel"
+        :class="
+          inline
+            ? classBinding(classObject, 'labelContainer', 'flex-1 items-center')
+            : classBinding(classObject, 'labelContainer', 'w-full')
+        "
+      >
         <h2
-          v-if="!hideLabel"
-          :class="{
-            'inline-block lg:pr-5 pb-2 lg:pb-0': inline,
-            'pb-2': !inline,
-          }"
+          :class="
+            inline
+              ? classBinding(
+                  classObject,
+                  'sponsorLabel',
+                  'inline-block lg:pr-5 pb-2 lg:pb-0'
+                )
+              : classBinding(classObject, 'sponsorLabel', 'pb-2')
+          "
           class="text-center uppercase font-medium"
         >
           {{ sponsor.label }}
         </h2>
       </div>
-      <div :class="inline ? 'flex-1 items-center pb-2 lg:pb-0' : 'w-full'">
+      <div
+        :class="
+          inline
+            ? classBinding(
+                classObject,
+                'imageContainer',
+                'flex-1 items-center pb-2 lg:pb-0'
+              )
+            : classBinding(classObject, 'imageContainer', 'w-full')
+        "
+      >
         <img
-          :class="{ block: !inline }"
-          class="sponsor-img m-auto cursor-pointer"
+          :class="[
+            { block: !inline },
+            classBinding(
+              classObject,
+              'sponsorImage',
+              'sponsor-img m-auto cursor-pointer'
+            ),
+          ]"
           :src="sponsor.photo"
           @click="handleClick()"
         />

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

@@ -12,6 +12,8 @@ import {
   addMinutes,
 } from "date-fns";
 import { useTemplateConfigsStore } from "../../store";
+import { countdownTimerClassObj } from "../../@types/components";
+import { useClassBinding } from "../../composables/useClassBinding";
 
 interface Props {
   date: string;
@@ -20,6 +22,7 @@ interface Props {
   showHours?: boolean;
   showMinutes?: boolean;
   showSeconds?: boolean;
+  classObject?: countdownTimerClassObj;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -28,8 +31,31 @@ const props = withDefaults(defineProps<Props>(), {
   showHours: true,
   showMinutes: true,
   showSeconds: true,
+  classObject: () => {
+    return {
+      container: "",
+      countdownContainer: "",
+      beginText: "",
+      unitsContainer: "",
+      itemContainer: "",
+      unitLabel: "",
+      unitContainer: "",
+      unit: "",
+    };
+  },
 });
 
+const {
+  isCompact,
+  showDays,
+  showHours,
+  showMinutes,
+  showSeconds,
+  classObject,
+} = toRefs(props);
+
+const { classBinding } = useClassBinding();
+
 // reactive data
 const isCounting = ref<boolean>(true);
 const days = ref<number>(0);
@@ -104,36 +130,83 @@ onMounted(() => {
 
 <template>
   <div
-    class="countdown-timer"
-    :class="{ compact: isCompact, fullsize: !isCompact }"
+    :class="[
+      { compact: isCompact, fullsize: !isCompact },
+      classBinding(classObject, 'container', 'countdown-timer'),
+    ]"
   >
     <div
-      class="countdown-container flex flex-col pt-8 mx-4 text-center justify-center items-center content-center"
+      :class="
+        classBinding(
+          classObject,
+          'countdownContainer',
+          'countdown-container flex flex-col pt-8 mx-4 text-center justify-center items-center content-center'
+        )
+      "
     >
       <div class="flex-initial">
-        <h1 v-if="isCounting" class="m-0 p-0 heading-color-3">EVENT BEGINS</h1>
-        <h1 v-if="!isCounting" class="m-0 p-0 heading-color-3">
-          {{ eventHasBegunText }}
+        <h1
+          :class="
+            classBinding(
+              classObject,
+              'beginText',
+              'm-0 p-0 uppercase heading-color-3'
+            )
+          "
+        >
+          {{ isCounting ? "event begins" : eventHasBegunText }}
         </h1>
       </div>
 
       <div
         v-if="isCounting"
-        class="units-container flex text-center p-6 pt-4 mt-4 items-center border border-color-accent-1 accent-color-3"
+        :class="
+          classBinding(
+            classObject,
+            'unitsContainer',
+            'units-container flex text-center p-6 pt-4 mt-4 items-center border border-color-accent-1 accent-color-3'
+          )
+        "
       >
         <!-- Days -->
         <div
           v-if="showDays"
-          class="item-container"
-          :class="{ dropshade: clockStyle == 'dials' }"
+          :class="[
+            { dropshade: clockStyle == 'dials' },
+            classBinding(classObject, 'itemContainer', 'item-container'),
+          ]"
         >
-          <div class="unit-label-container" :class="clockStyle">days</div>
-          <div class="unit-container contrast-border" :class="clockStyle">
-            <div v-if="clockStyle == 'windows'" :class="fontClass">
+          <div
+            :class="[
+              clockStyle,
+              classBinding(classObject, 'unitLabel', 'unit-label-container'),
+            ]"
+          >
+            days
+          </div>
+          <div
+            :class="[
+              clockStyle,
+              classBinding(
+                classObject,
+                'unitContainer',
+                'unit-container contrast-border'
+              ),
+            ]"
+          >
+            <div
+              v-if="clockStyle == 'windows'"
+              :class="[fontClass, classBinding(classObject, 'unit', '')]"
+            >
               {{ days }}
             </div>
             <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
-              <div :key="days" :class="fontClass">{{ days }}</div>
+              <div
+                :key="days"
+                :class="[fontClass, classBinding(classObject, 'unit', '')]"
+              >
+                {{ days }}
+              </div>
             </transition>
           </div>
         </div>
@@ -144,13 +217,37 @@ onMounted(() => {
           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">
+          <div
+            :class="[
+              clockStyle,
+              classBinding(classObject, 'unitLabel', 'unit-label-container'),
+            ]"
+          >
+            min
+          </div>
+          <div
+            :class="[
+              clockStyle,
+              classBinding(
+                classObject,
+                'unitContainer',
+                'unit-container contrast-border'
+              ),
+            ]"
+          >
+            <div
+              v-if="clockStyle == 'windows'"
+              :class="[fontClass, classBinding(classObject, 'unit', '')]"
+            >
               {{ minutes }}
             </div>
             <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
-              <div :key="minutes" :class="fontClass">{{ minutes }}</div>
+              <div
+                :key="minutes"
+                :class="[fontClass, classBinding(classObject, 'unit', '')]"
+              >
+                {{ minutes }}
+              </div>
             </transition>
           </div>
         </div>
@@ -161,13 +258,41 @@ onMounted(() => {
           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">
+          <div
+            :class="[
+              clockStyle,
+              classBinding(
+                classObject,
+                'unitLabel',
+                'unit-label-container last'
+              ),
+            ]"
+          >
+            sec
+          </div>
+          <div
+            :class="[
+              clockStyle,
+              classBinding(
+                classObject,
+                'unitContainer',
+                'unit-container contrast-border'
+              ),
+            ]"
+          >
+            <div
+              v-if="clockStyle == 'windows'"
+              :class="[fontClass, classBinding('unit', '')]"
+            >
               {{ seconds }}
             </div>
             <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
-              <div :key="seconds" :class="fontClass">{{ seconds }}</div>
+              <div
+                :key="seconds"
+                :class="[fontClass, classBinding(classObject, 'unit', '')]"
+              >
+                {{ seconds }}
+              </div>
             </transition>
           </div>
         </div>