@icvdeveloper/common-module 0.0.1

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

@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import { find } from "lodash";
+import { Sponsor as SponsorModel } from "../../../models/conference";
+
+type Props = {
+  sponsor: SponsorModel;
+  size?: string;
+  inline?: boolean;
+  hideLabel?: boolean;
+  enabledSponsors?: SponsorModel[];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "default",
+  inline: false,
+  hideLabel: false,
+  enabledSponsors: () => {
+    return [];
+  },
+});
+
+const { sponsor, size, inline, hideLabel, enabledSponsors } = toRefs(props);
+
+// data
+const showModal = ref<boolean>(false);
+const enabledSponsor = ref<SponsorModel | null>(null);
+
+// methods
+const handleClick = () => {
+  if (enabledSponsors.value.length > 0) {
+    const sponsorResult = find(enabledSponsors.value, { id: sponsor.value.id });
+
+    if (sponsorResult && sponsorResult.vanity === 1) {
+      enabledSponsor.value = sponsorResult;
+      showModal.value = true;
+      return;
+    }
+  }
+
+  window.open(sponsor.value.website, "_blank");
+};
+</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'">
+        <h2
+          v-if="!hideLabel"
+          :class="{
+            'inline-block lg:pr-5 pb-2 lg:pb-0': inline,
+            'pb-2': !inline,
+          }"
+          class="text-center uppercase font-medium"
+        >
+          {{ sponsor.label }}
+        </h2>
+      </div>
+      <div :class="inline ? 'flex-1 items-center pb-2 lg:pb-0' : 'w-full'">
+        <img
+          :class="{ block: !inline }"
+          class="sponsor-img m-auto cursor-pointer"
+          :src="sponsor.photo"
+          @click="handleClick()"
+        />
+      </div>
+    </div>
+
+    <CommonModal :visible="showModal">
+      <template #modal-body>
+        <CommonAffiliatePage
+          v-if="enabledSponsor"
+          :affiliate="enabledSponsor"
+        ></CommonAffiliatePage>
+      </template>
+    </CommonModal>
+  </div>
+</template>
+
+<style lang="scss">
+.small {
+  h2 {
+    font-size: 14px;
+  }
+
+  img {
+    max-height: 35px !important;
+  }
+}
+
+.medium {
+  h2 {
+    font-size: 0.9em;
+  }
+
+  img {
+    max-height: 40px;
+  }
+}
+
+.default {
+  width: 100%;
+
+  img {
+    max-height: 60px;
+  }
+}
+</style>

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

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { storeToRefs } from "pinia";
+import { Conference } from "../../models/conference";
+import { useLogin } from "../../composables/useLogin";
+
+interface Props {
+  conference?: Conference | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  conference: null,
+});
+
+const { conference } = toRefs<Props>(props);
+
+const { globalConfigValue } = storeToRefs(useTemplateConfigsStore());
+
+// Methods
+const { loginError, handleLogin, email, password, tooManySessions, showReset } =
+  useLogin(conference);
+</script>
+
+<template>
+  <div class="px-2">
+    <div class="flex flex-1 flex-col text-center pt-8">
+      <h1 class="mb-3 heading-color-3">Log In</h1>
+      <Message
+        v-if="loginError"
+        :success="false"
+        class="w-full max-w-xs mx-auto"
+      >
+        Invalid email or password.
+        <br />
+        <a
+          v-if="!globalConfigValue('secure_site_access_enabled', false)"
+          href="/login/email"
+          >Forgot Your Password?</a
+        >
+        <a
+          v-if="globalConfigValue('secure_site_access_enabled', false)"
+          class="cursor-pointer"
+          @click="showReset"
+          >Forgot Your Password?</a
+        >
+      </Message>
+
+      <div class="max-w-xs mx-auto" @keyup.enter="handleLogin()">
+        <input
+          v-model="email"
+          type="email"
+          placeholder="Email"
+          class="form-input contrast-border mb-2"
+        />
+        <input
+          v-model="password"
+          type="password"
+          placeholder="password"
+          class="form-input contrast-border mb-5"
+        />
+        <button v-if="!tooManySessions" class="btn" @click="handleLogin()">
+          Log In
+        </button>
+        <Message
+          v-if="tooManySessions"
+          :success="false"
+          class="w-full max-w-xs mx-auto"
+        >
+          This user access is logged in on another device!
+        </Message>
+        <button v-if="tooManySessions" class="btn" @click="handleLogin(true)">
+          Sign out other Device
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,275 @@
+<script lang="ts" setup>
+import { storeToRefs } from "pinia";
+import {
+  isBefore,
+  differenceInDays,
+  differenceInHours,
+  differenceInMinutes,
+  differenceInSeconds,
+  addDays,
+  addHours,
+  addMinutes,
+} from "date-fns";
+
+interface Props {
+  date: string;
+  isCompact?: boolean;
+  showDays?: boolean;
+  showHours?: boolean;
+  showMinutes?: boolean;
+  showSeconds?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isCompact: false,
+  showDays: true,
+  showHours: true,
+  showMinutes: true,
+  showSeconds: true,
+});
+
+// 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 = "text-countdown-int 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="countdown-timer"
+    :class="{ compact: isCompact, fullsize: !isCompact }"
+  >
+    <div
+      class="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>
+      </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"
+      >
+        <!-- Days -->
+        <div
+          v-if="showDays"
+          class="item-container"
+          :class="{ dropshade: clockStyle == 'dials' }"
+        >
+          <div class="unit-label-container" :class="clockStyle">days</div>
+          <div class="unit-container contrast-border" :class="clockStyle">
+            <div v-if="clockStyle == 'windows'" :class="fontClass">
+              {{ days }}
+            </div>
+            <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
+              <div :key="days" :class="fontClass">{{ days }}</div>
+            </transition>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.countdown-timer.compact {
+  .countdown-container {
+    @apply pt-0 mx-0;
+  }
+  h1 {
+    @apply text-xl;
+  }
+  .units-container {
+    @apply p-4 mt-1;
+  }
+  .unit-container.windows {
+    width: 60px;
+  }
+}
+
+/* label + number container */
+.item-container {
+  @apply flex flex-col;
+}
+/* days hrs min sec labels */
+.unit-label-container {
+  @apply text-xs font-light;
+  height: 18px;
+}
+.unit-label-container.windows {
+  @apply pb-4 uppercase tracking-wide;
+}
+.unit-label-container.dials {
+  @apply mx-0;
+  padding-top: 2px;
+  border-top: 1px solid #eee;
+  border-left: 1px solid #eee;
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ddd;
+  background-image: linear-gradient(#fafafa, #efefef, #e6e6e6);
+}
+.unit-label-container.dials.last {
+  width: 67px;
+}
+
+/* number boxes */
+.unit-container {
+  @apply flex text-center items-center justify-center overflow-hidden;
+}
+.unit-container.windows {
+  @apply mx-1 px-2 border-4 rounded-lg shadow-md;
+  width: 70px;
+}
+.unit-container.dials {
+  @apply mx-0 shadow;
+  width: 70px;
+  height: 36px;
+}
+
+/* numbers */
+.text-countdown-int {
+  //color: $heading-color-6;
+}
+.countdown-timer.compact .text-countdown-unit {
+  @apply pb-1;
+}
+
+/* dropshade for dials */
+.dropshade {
+  position: relative;
+  overflow: hidden;
+}
+.dropshade:before,
+.dropshade:after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: 18px;
+  bottom: 0px;
+  width: 85px;
+  -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 15px / 80px;
+  -moz-border-radius: 15px / 80px;
+  border-radius: 10px / 80px;
+  background-image: linear-gradient(
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.1)
+  );
+}
+.dropshade:before {
+  left: -84px;
+}
+.dropshade:after {
+  left: -14px;
+}
+.dropshade.last:after {
+  left: -18px;
+}
+
+/* lg: dials */
+@screen lg {
+  .countdown-timer.fullsize {
+    .unit-container.windows,
+    .unit-container.dials {
+      width: 80px;
+      height: 46px;
+    }
+    .unit-label-container.dials.last {
+      width: 77px;
+    }
+    .dropshade:before {
+      left: -84px;
+    }
+    .dropshade:after {
+      left: -4px;
+    }
+    .dropshade.last:after {
+      left: -8px;
+    }
+  }
+}
+
+/* dials transitions */
+.slide-leave-active,
+.slide-enter-active {
+  transition: 0.3s;
+}
+.slide-enter {
+  transform: translate(0, -100%);
+}
+.slide-leave-active {
+  transform: translate(0, 100%);
+}
+</style>

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

@@ -0,0 +1,16 @@
+<script>
+import { h } from "vue";
+export default defineComponent({
+  props: {
+    template: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props, context) {
+    return () => h("span", {
+      innerHtml: props.template
+    });
+  }
+});
+</script>

package/dist/runtime/components/core/DynamicHtml.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

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

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+interface Props {
+  visible?: boolean;
+  modalSize?: string;
+  noScroll?: boolean;
+  showClose?: boolean;
+  usePadding?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  modalSize: "25",
+  noScroll: false,
+  showClose: true,
+  usePadding: true,
+});
+
+const emit = defineEmits(["trigger", "clicked"]);
+
+const { visible, modalSize, noScroll, showClose, usePadding } = toRefs(props);
+
+const modalClass = computed(() => {
+  const padding = usePadding ? "p-6" : "";
+  const classes = `relative w-full ${padding} m-auto flex-col flex rounded shadow bg-white modal-box`;
+  if (noScroll) {
+    return classes + ` max-h-full overflow-hidden`;
+  } else {
+    return classes + ` overflow-y-auto`;
+  }
+});
+
+const closeModal = () => {
+  emit("trigger");
+};
+
+const clicked = () => {
+  emit("clicked");
+};
+</script>
+
+<template>
+  <Transition>
+    <div
+      v-if="visible"
+      class="fixed top-0 bottom-0 left-0 right-0 z-50 flex bg-smoke-light p-3"
+      @click="clicked"
+    >
+      <div
+        class="custom-max-width"
+        :class="modalClass"
+        :style="'--maxw: ' + modalSize + '%;'"
+      >
+        <span
+          v-if="showClose"
+          class="absolute top-0 bottom-0 right-0 py-2 px-3 z-30 max-h-1em"
+        >
+          <button class="p-1" @click="closeModal()">
+            <span>X</span>
+          </button>
+        </span>
+
+        <slot name="modal-title" />
+        <slot name="modal-body" />
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style lang="scss" scoped>
+.max-h-1em {
+  max-height: 1em;
+}
+.bg-smoke-light {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.custom-max-width {
+  @screen lg {
+    max-width: calc(var(--maxw) * 1.25);
+  }
+  @screen xl {
+    max-width: var(--maxw);
+  }
+}
+</style>

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

@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import { find, get } from "lodash";
+import { defineAsyncComponent } from "vue";
+import { Icon, Icons } from "../../models/icons";
+
+/**
+ * Delay importing only the icon file that we need
+ */
+const icons: Icons = {
+  person: {
+    color: "#333",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/icon-person.svg")
+    ),
+  },
+  info: {
+    color: "#4286f4",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/icon-info.svg")
+    ),
+  },
+  twitter: {
+    color: "#1CB7EB",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/icon-twitter.svg")
+    ),
+  },
+  facebook: {
+    color: "#4E71A8",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/icon-facebook.svg")
+    ),
+  },
+  linkedin: {
+    color: "#4E71A8",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/icon-linkedin.svg")
+    ),
+  },
+  youtube: {
+    color: "#CA3737",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/icon-youtube.svg")
+    ),
+  },
+  website: {
+    color: "#4286f4",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/icon-website.svg")
+    ),
+  },
+  newwindow: {
+    color: "#333",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/icon-new-window.svg")
+    ),
+  },
+  playarrow: {
+    color: "#CA3737",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/icon-play.svg")
+    ),
+  },
+  zoom: {
+    color: "#333",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/icon-zoom.svg")
+    ),
+  },
+  downarrow: {
+    color: "#333",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/icon-down-arrow.svg")
+    ),
+  },
+};
+
+type Props = {
+  icon?: keyof Icons;
+  grayScale?: boolean;
+  width?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: "info",
+  grayScale: false,
+  width: "20px",
+});
+
+const { icon, grayScale, width } = toRefs(props);
+
+// computed
+const iconDims = computed(() => ({
+  width: width.value,
+  height: width.value,
+}));
+
+const iconStyle = computed(() => {
+  if (!grayScale.value) {
+    return {
+      fill: icons[icon.value].color,
+    };
+  }
+
+  return {
+    fill: "#666",
+  };
+});
+
+const iconComponent = computed(() => {
+  return icons[icon.value].component;
+});
+</script>
+
+<template>
+  <div :style="iconDims">
+    <component :is="iconComponent" :style="iconStyle" />
+  </div>
+</template>