@icvdeveloper/common-module 0.0.88 → 0.0.90

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

@@ -1,310 +1,359 @@
-<script lang="ts" setup>
-import { ref, toRefs, computed, onMounted } from "vue";
-import { storeToRefs } from "pinia";
-import {
-  isBefore,
-  differenceInDays,
-  differenceInHours,
-  differenceInMinutes,
-  differenceInSeconds,
-  addDays,
-  addHours,
-  addMinutes,
-} from "date-fns";
-import { useTemplateConfigsStore } from "../../store";
-import { countdownTimerClassObj } from "../../@types/components";
-import { useClassBinding } from "../../composables/useClassBinding";
-
-interface Props {
-  date: string;
-  isCompact?: boolean;
-  showDays?: boolean;
-  showHours?: boolean;
-  showMinutes?: boolean;
-  showSeconds?: boolean;
-  classObject?: countdownTimerClassObj;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  isCompact: false,
-  showDays: true,
-  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);
-const hours = ref<number>(0);
-const minutes = ref<number>(0);
-const seconds = ref<number>(0);
-const loopTimer = ref<NodeJS.Timer | null>(null);
-const { pagesConfigValue } = storeToRefs(useTemplateConfigsStore());
-
-// emits
-const emit = defineEmits(["complete"]);
-
-// computed
-const eventHasBegunText = computed(() => {
-  return (
-    pagesConfigValue.value("main.countdown_event_has_begun_text") ||
-    "The Event Has Begun"
-  );
-});
-
-const clockStyle = computed(() => {
-  return pagesConfigValue.value("main.countdown_timer_style", "windows");
-});
-
-const fontClass = computed(() => {
-  const fontBase = "font-bold";
-  return props.isCompact === true
-    ? fontBase + " text-xl lg:text-2xl"
-    : fontBase + " text-2xl lg:text-4xl";
-});
-
-// methods
-const updateCountdown = () => {
-  if (!isBefore(new Date(), new Date(props.date))) {
-    isCounting.value = false;
-    emit("complete");
-    clearInterval(loopTimer.value);
-    return;
-  }
-
-  days.value = differenceInDays(new Date(props.date), new Date());
-  hours.value = differenceInHours(
-    new Date(props.date),
-    addDays(new Date(), days.value)
-  );
-
-  minutes.value = differenceInMinutes(
-    new Date(props.date),
-    addDays(addHours(new Date(), hours.value), days.value)
-  );
-  seconds.value = differenceInSeconds(
-    new Date(props.date),
-    addDays(
-      addHours(addMinutes(new Date(), minutes.value), hours.value),
-      days.value
-    )
-  );
-};
-
-const startCountdown = () => {
-  updateCountdown();
-  loopTimer.value = setInterval(() => {
-    updateCountdown();
-  }, 1000);
-};
-
-// on mount
-onMounted(() => {
-  startCountdown();
-});
-</script>
-
-<template>
-  <div
-    :class="[
-      { compact: isCompact, fullsize: !isCompact },
-      classBinding(classObject, 'container', 'countdown-timer'),
-    ]"
-  >
-    <div
-      :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
-          :class="
-            classBinding(
-              classObject,
-              'beginText',
-              'm-0 p-0 uppercase heading-color-3'
-            )
-          "
-        >
-          {{ isCounting ? "event begins" : eventHasBegunText }}
-        </h1>
-      </div>
-
-      <div
-        v-if="isCounting"
-        :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="[
-            { dropshade: clockStyle == 'dials' },
-            classBinding(classObject, 'itemContainer', 'item-container'),
-          ]"
-        >
-          <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, classBinding(classObject, 'unit', '')]"
-              >
-                {{ days }}
-              </div>
-            </transition>
-          </div>
-        </div>
-
-        <!-- Minutes -->
-        <div
-          v-if="showMinutes"
-          :class="[
-            { dropshade: clockStyle == 'dials' },
-            classBinding(classObject, 'itemContainer', 'item-container'),
-          ]"
-        >
-          <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, classBinding(classObject, 'unit', '')]"
-              >
-                {{ minutes }}
-              </div>
-            </transition>
-          </div>
-        </div>
-
-        <!-- Seconds -->
-        <div
-          v-if="showSeconds"
-          :class="[
-            { dropshade: clockStyle == 'dials' },
-            classBinding(classObject, 'itemContainer', 'item-container last'),
-          ]"
-        >
-          <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(classObject, 'unit', '')]"
-            >
-              {{ seconds }}
-            </div>
-            <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
-              <div
-                :key="seconds"
-                :class="[fontClass, classBinding(classObject, 'unit', '')]"
-              >
-                {{ seconds }}
-              </div>
-            </transition>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
+<script lang="ts" setup>
+import { ref, toRefs, computed, onMounted } from "vue";
+import { storeToRefs } from "pinia";
+import {
+  isBefore,
+  differenceInDays,
+  differenceInHours,
+  differenceInMinutes,
+  differenceInSeconds,
+  addDays,
+  addHours,
+  addMinutes,
+} from "date-fns";
+import { useTemplateConfigsStore } from "../../store";
+import { countdownTimerClassObj } from "../../@types/components";
+import { useClassBinding } from "../../composables/useClassBinding";
+
+interface Props {
+  date: string;
+  isCompact?: boolean;
+  showDays?: boolean;
+  showHours?: boolean;
+  showMinutes?: boolean;
+  showSeconds?: boolean;
+  showStatusText?: boolean;
+  classObject?: countdownTimerClassObj;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isCompact: false,
+  showDays: true,
+  showHours: true,
+  showMinutes: true,
+  showSeconds: true,
+  showStatusText: 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);
+const hours = ref<number>(0);
+const minutes = ref<number>(0);
+const seconds = ref<number>(0);
+const loopTimer = ref<NodeJS.Timer | null>(null);
+const { pagesConfigValue } = storeToRefs(useTemplateConfigsStore());
+
+// emits
+const emit = defineEmits(["complete"]);
+
+// computed
+const eventHasBegunText = computed(() => {
+  return (
+    pagesConfigValue.value("main.countdown_event_has_begun_text") ||
+    "The Event Has Begun"
+  );
+});
+
+const clockStyle = computed(() => {
+  return pagesConfigValue.value("main.countdown_timer_style", "windows");
+});
+
+const fontClass = computed(() => {
+  const fontBase = "font-bold";
+  return props.isCompact === true
+    ? fontBase + " text-xl lg:text-2xl"
+    : fontBase + " text-2xl lg:text-4xl";
+});
+
+// methods
+const updateCountdown = () => {
+  if (!isBefore(new Date(), new Date(props.date))) {
+    isCounting.value = false;
+    emit("complete");
+    clearInterval(loopTimer.value);
+    return;
+  }
+
+  days.value = differenceInDays(new Date(props.date), new Date());
+  hours.value = differenceInHours(
+    new Date(props.date),
+    addDays(new Date(), days.value)
+  );
+
+  minutes.value = differenceInHours(
+    new Date(props.date),
+    addDays(addHours(new Date(), hours.value), days.value)
+  );
+  minutes.value = differenceInMinutes(
+    new Date(props.date),
+    addDays(addHours(new Date(), hours.value), days.value)
+  );
+  seconds.value = differenceInSeconds(
+    new Date(props.date),
+    addDays(
+      addHours(addMinutes(new Date(), minutes.value), hours.value),
+      days.value
+    )
+  );
+};
+
+const startCountdown = () => {
+  updateCountdown();
+  loopTimer.value = setInterval(() => {
+    updateCountdown();
+  }, 1000);
+};
+
+// on mount
+onMounted(() => {
+  startCountdown();
+});
+</script>
+
+<template>
+  <div
+    :class="[
+      { compact: isCompact, fullsize: !isCompact },
+      classBinding(classObject, 'container', 'countdown-timer'),
+    ]"
+  >
+    <div
+      :class="
+        classBinding(
+          classObject,
+          'countdownContainer',
+          'countdown-container flex flex-col pt-8 mx-4 text-center justify-center items-center content-center'
+        )
+      "
+    >
+      <div v-if="showStatusText" class="flex-initial">
+        <h1
+          :class="
+            classBinding(
+              classObject,
+              'beginText',
+              'm-0 p-0 uppercase heading-color-3'
+            )
+          "
+        >
+          {{ !isCounting ? "event begins" : eventHasBegunText }}
+        </h1>
+      </div>
+
+      <div
+        v-if="isCounting"
+        :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="[
+            { dropshade: clockStyle == 'dials' },
+            classBinding(classObject, 'itemContainer', 'item-container'),
+          ]"
+        >
+          <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, classBinding(classObject, 'unit', '')]"
+              >
+                {{ days }}
+              </div>
+            </transition>
+          </div>
+        </div>
+
+        <!-- Hours -->
+        <div
+          v-if="showHours"
+          :class="[
+            { dropshade: clockStyle == 'dials' },
+            classBinding(classObject, 'itemContainer', 'item-container'),
+          ]"
+        >
+          <div
+            :class="[
+              clockStyle,
+              classBinding(classObject, 'unitLabel', 'unit-label-container'),
+            ]"
+          >
+            Hours
+          </div>
+          <div
+            :class="[
+              clockStyle,
+              classBinding(
+                classObject,
+                'unitContainer',
+                'unit-container contrast-border'
+              ),
+            ]"
+          >
+            <div
+              v-if="clockStyle == 'windows'"
+              :class="[fontClass, classBinding(classObject, 'unit', '')]"
+            >
+              {{ hours }}
+            </div>
+            <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
+              <div
+                :key="hours"
+                :class="[fontClass, classBinding(classObject, 'unit', '')]"
+              >
+                {{ hours }}
+              </div>
+            </transition>
+          </div>
+        </div>
+
+        <!-- Minutes -->
+        <div
+          v-if="showMinutes"
+          :class="[
+            { dropshade: clockStyle == 'dials' },
+            classBinding(classObject, 'itemContainer', 'item-container'),
+          ]"
+        >
+          <div
+            :class="[
+              clockStyle,
+              classBinding(classObject, 'unitLabel', 'unit-label-container'),
+            ]"
+          >
+            Minutes
+          </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, classBinding(classObject, 'unit', '')]"
+              >
+                {{ minutes }}
+              </div>
+            </transition>
+          </div>
+        </div>
+
+        <!-- Seconds -->
+        <div
+          v-if="showSeconds"
+          :class="[
+            { dropshade: clockStyle == 'dials' },
+            classBinding(classObject, 'itemContainer', 'item-container last'),
+          ]"
+        >
+          <div
+            :class="[
+              clockStyle,
+              classBinding(
+                classObject,
+                'unitLabel',
+                'unit-label-container last'
+              ),
+            ]"
+          >
+            Seconds
+          </div>
+          <div
+            :class="[
+              clockStyle,
+              classBinding(
+                classObject,
+                'unitContainer',
+                'unit-container contrast-border'
+              ),
+            ]"
+          >
+            <div
+              v-if="clockStyle == 'windows'"
+              :class="[fontClass, classBinding(classObject, 'unit', '')]"
+            >
+              {{ seconds }}
+            </div>
+            <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
+              <div
+                :key="seconds"
+                :class="[fontClass, classBinding(classObject, 'unit', '')]"
+              >
+                {{ seconds }}
+              </div>
+            </transition>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .countdown-timer.compact .countdown-container {
   @apply pt-0 mx-0;
@@ -436,4 +485,4 @@ onMounted(() => {
 .slide-leave-active {
   transform: translate(0, 100%);
 }
-</style>
+</style>