@icvdeveloper/common-module 1.4.14 → 2.1.0

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

@@ -27,11 +27,17 @@ const zoomUrl = computed(() => {
       @trigger="showModal = false"
     >
       <template #modal-body>
-        <iframe :src="zoomUrl" class="w-full h-full"></iframe>
+        <iframe
+          :src="zoomUrl"
+          class="w-full h-full"
+        />
       </template>
     </CommonModal>
-    <a class="no-underline" href="javascript:null" @click="showModal = true">
-      <slot name="modal-link"></slot>
+    <a
+      href="javascript:null"
+      @click="showModal = true"
+    >
+      <slot name="modal-link" />
     </a>
   </span>
 </template>

package/dist/runtime/components/events/EventHeader.vue

@@ -18,7 +18,6 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 // stores
-const conferenceStore = useConferencesStore();
 const { globalConfigValue, pagesConfigValue } = useTemplateConfigsStore();
 
 // reactive data
@@ -69,7 +68,10 @@ const mainBodyImage = computed(() => {
 </script>
 
 <template>
-  <div :style="mainStyles" class="flex bg-color-2">
+  <div
+    :style="mainStyles"
+    class="flex bg-color-2"
+  >
     <div
       v-if="useEventText"
       class="text-center flex flex-1 flex-col items-center justify-center h-auto p-12"
@@ -122,12 +124,20 @@ const mainBodyImage = computed(() => {
           :href="getConferenceRegUrl()"
           :target="/^http/.test(getConferenceRegUrl()) ? '_blank' : '_self'"
         >
-          <button class="btn" :class="hasOtherButton ? 'md:ml-4' : ''">
+          <button
+            class="btn"
+            :class="hasOtherButton ? 'md:ml-4' : ''"
+          >
             {{ getConferenceRegText() }}
           </button>
         </a>
       </div>
     </div>
-    <img v-else :src="mainBodyImage" class="w-full h-auto" />
+    <img
+      v-else
+      :src="mainBodyImage"
+      class="w-full h-auto"
+      alt="Event header image"
+    >
   </div>
 </template>

package/dist/runtime/components/events/ListEvents.vue

@@ -230,7 +230,7 @@ const showLoginButton = computed((): boolean => {
               )
             "
             :src="conference.photo"
-          />
+          >
         </div>
         <!-- event details container -->
         <div
@@ -259,7 +259,7 @@ const showLoginButton = computed((): boolean => {
           >
             <!-- event details -->
             <div
-              :class="classBinding(classObject, 'eventDetails', 'flex-grow')"
+              :class="classBinding(classObject, 'eventDetails', 'grow')"
             >
               <template v-if="showBrand && getBrand(conference.affiliates)">
                 <a
@@ -274,7 +274,7 @@ const showLoginButton = computed((): boolean => {
                       classBinding(
                         classObject,
                         'eventBrand',
-                        'text-base font-bold leading-tight tracking-wide mb-3'
+                        'text-base font-bold leading-tight tracking-wider mb-3'
                       )
                     "
                   >
@@ -287,10 +287,9 @@ const showLoginButton = computed((): boolean => {
                   eventPathPrefix
                     ? eventPathPrefix + conference.id
                     : `/${isUpcoming ? 'upcoming-events' : 'past-events'}/${
-                        conference.id
-                      }`
+                      conference.id
+                    }`
                 "
-                class="no-underline"
               >
                 <h2
                   :class="
@@ -309,7 +308,7 @@ const showLoginButton = computed((): boolean => {
                   classBinding(
                     classObject,
                     'eventDate',
-                    'text-base leading-normal tracking-wide font-light uppercase md:text-md lg:text-lg'
+                    'text-base leading-normal tracking-wider font-light uppercase md:text-md lg:text-lg'
                   )
                 "
               >
@@ -322,9 +321,9 @@ const showLoginButton = computed((): boolean => {
             <div
               v-if="
                 isUpcoming &&
-                showCountdown &&
-                countdownPosition === Position.TOP &&
-                pagesConfigValue('main.countdown_timer')
+                  showCountdown &&
+                  countdownPosition === Position.TOP &&
+                  pagesConfigValue('main.countdown_timer')
               "
               :class="
                 classBinding(
@@ -339,7 +338,7 @@ const showLoginButton = computed((): boolean => {
                 :timezone="conference.timezone"
                 :is-compact="true"
                 :class-object="classObject.components.countdownTimer"
-              ></CommonCountdownTimer>
+              />
             </div>
           </div>
           <!-- event button, countdown timer, and sponsors container -->
@@ -475,9 +474,9 @@ const showLoginButton = computed((): boolean => {
               <div
                 v-if="
                   isUpcoming &&
-                  showCountdown &&
-                  countdownPosition === Position.RIGHT &&
-                  pagesConfigValue('main.countdown_timer')
+                    showCountdown &&
+                    countdownPosition === Position.RIGHT &&
+                    pagesConfigValue('main.countdown_timer')
                 "
                 class="flex-auto md:flex mt-3 md:mt-2"
                 :class="
@@ -493,16 +492,16 @@ const showLoginButton = computed((): boolean => {
                   :timezone="conference.timezone"
                   :is-compact="true"
                   :class-object="classObject.components.countdownTimer"
-                ></CommonCountdownTimer>
+                />
               </div>
             </div>
             <!-- countdown timer - bottom-aligned -->
             <div
               v-if="
                 isUpcoming &&
-                showCountdown &&
-                countdownPosition === Position.BOTTOM &&
-                pagesConfigValue('main.countdown_timer')
+                  showCountdown &&
+                  countdownPosition === Position.BOTTOM &&
+                  pagesConfigValue('main.countdown_timer')
               "
               :class="
                 classBinding(
@@ -517,7 +516,7 @@ const showLoginButton = computed((): boolean => {
                 :timezone="conference.timezone"
                 :is-compact="true"
                 :class-object="classObject.components.countdownTimer"
-              ></CommonCountdownTimer>
+              />
             </div>
             <!-- sponsors container - bottom-aligned -->
             <div
@@ -548,7 +547,7 @@ const showLoginButton = computed((): boolean => {
                   v-if="affiliate.photo"
                   :sponsor="affiliate"
                   :class-object="classObject.components.sponsor"
-                ></CommonSponsor>
+                />
               </template>
             </div>
           </div>
@@ -573,7 +572,7 @@ const showLoginButton = computed((): boolean => {
               v-if="affiliate.photo"
               :sponsor="affiliate"
               :class-object="classObject.components.sponsor"
-            ></CommonSponsor>
+            />
           </template>
         </div>
       </div>
@@ -594,7 +593,7 @@ const showLoginButton = computed((): boolean => {
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .leading-tight {
   line-height: 1.25rem;
 }

package/dist/runtime/components/forms/CheckboxGroup.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { ref, toRefs } from 'vue';
+
+type Props = {
+  options: any,
+}
+
+const props = defineProps<Props>();
+
+const { options } = toRefs(props);
+
+// data
+// TODO - set type
+const currentValueArray = ref<any[]>([]);
+
+// emits
+// TODO - set value type
+const emit = defineEmits<{
+  (event: 'input', value: any): void;
+}>();
+
+// methods
+const onChange = (): void => {
+  emit('input', currentValueArray.value);
+};
+</script>
+
+
+<template>
+  <span>
+    <div
+      v-for="(option, index) in options"
+      :key="index"
+      class="mb-2 ml-4"
+    >                        
+      <p-check
+        v-model="currentValueArray"
+        :value="option.value"
+        @change="onChange"
+      >
+        {{ option.name }}
+      </p-check>
+    </div>   
+  </span>   
+</template>
+

package/dist/runtime/components/forms/ErrorField.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { toRefs } from 'vue';
 type Props = {
   errors: Array<string>;
 };
@@ -10,8 +11,16 @@ const { errors } = toRefs(props);
 
 <template>
   <div>
-    <div v-if="errors" class="my-1 text-red-500">
-      <div v-for="error in errors">{{ error }}</div>
+    <div
+      v-if="errors"
+      class="my-1 text-red-500"
+    >
+      <div
+        v-for="(error, index) in errors"
+        :key="index"
+      >
+        {{ error }}
+      </div>
     </div>
   </div>
 </template>

package/dist/runtime/components/forms/Message.vue

@@ -24,7 +24,7 @@ const successClass = computed(() => {
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .message-base {
   @apply border font-bold px-4 py-3 mb-4 rounded relative;
 }

package/dist/runtime/components/forms/RadioGroup.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { toRefs } from 'vue';
+
+type Props = {
+  value: any,
+  options: any
+}
+
+const props = defineProps<Props>();
+
+const { value, options } = toRefs(props);
+
+// emits
+// TODO - set value type
+const emit = defineEmits<{
+  (event: 'input', value: any): void;
+}>();
+
+// computed
+// TODO - what's this for?
+// what is <p-radio> ?
+const guid = () => {
+  return crypto.getRandomValues(new Uint32Array(2)).join('-');
+}
+
+// methods
+const onChange = (e: any): void => {
+  emit('input', e.target.value);
+};
+</script>
+
+
+<template>
+  <span>
+    <div
+      v-for="(option, index) in options"
+      :key="index"
+      class="mb-2 ml-4"
+    >
+      <p-radio
+        v-model="value"
+        color="default"
+        :value="option.value"
+        @change="onChange"
+      >
+        {{ option.name }}
+      </p-radio>
+    </div>    
+  </span>   
+</template>

package/dist/runtime/components/forms/SearchInput.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { storeToRefs } from "pinia";
 import CloseIcon from "../../assets/svg/close-icon.svg";
 
 type Props = {
@@ -9,6 +10,8 @@ const props = withDefaults(defineProps<Props>(), {
   placeholder: "Search...",
 });
 
+const { placeholder } = storeToRefs(props);
+
 const value = ref<string>("");
 
 const emit = defineEmits<{
@@ -30,8 +33,11 @@ const clear = () => {
       class="flex-1 pl-2 pr-5 py-1"
       :placeholder="placeholder"
       @input="emit('onChange', value)"
-    />
-    <span class="flex-initial cursor-pointer px-4 py-2" @click="clear">
+    >
+    <span
+      class="flex-initial cursor-pointer px-4 py-2"
+      @click="clear"
+    >
       <close-icon class="fill-current text-black" />
     </span>
   </div>

package/dist/runtime/components/forms/SelectDropDown.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { toRefs } from 'vue';
+
+type Props = {
+  value: any,
+  options: any,
+  firstDisabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  firstDisabled: false
+});
+
+const { value, options, firstDisabled } = toRefs(props);
+
+// emits
+// TODO - set value type
+const emit = defineEmits<{
+  (event: 'input', value: any): void;
+}>();
+
+// methods
+const onInput = (e: any): void => {
+  emit('input', e.target.value);
+};
+</script>
+
+<template>
+  <span>
+    <select
+      class="form-input"
+      :value="value"
+      @change="onInput"
+    >
+      <option
+        v-for="(option, index) in options"
+        :key="index"
+        :value="option.value"
+        :disabled="index==0 && firstDisabled"
+      >
+        {{ option.name }}
+      </option>
+    </select>
+  </span>
+</template>
+
+

package/dist/runtime/components/forms/SupportForm.vue

@@ -43,13 +43,16 @@ const acceptNumber = () => {
 
 <template>
   <section>
-    <form v-if="!submitted" @submit.prevent="handleForm">
+    <form
+      v-if="!submitted"
+      @submit.prevent="handleForm"
+    >
       <div class="font-bold mb-4">
         To contact support, please fill out the form below.
       </div>
 
       <div class="mb-3">
-        <label class="block font-semibold text-grey-darkest mb-1">Name</label>
+        <label class="block font-semibold text-gray-800 mb-1">Name</label>
 
         <CommonTextInput
           v-model="form.name"
@@ -62,7 +65,7 @@ const acceptNumber = () => {
       </div>
 
       <div class="mb-3">
-        <label class="block font-semibold text-grey-darkest mb-1">Email</label>
+        <label class="block font-semibold text-gray-800 mb-1">Email</label>
 
         <CommonTextInput
           v-model="form.email"
@@ -75,7 +78,7 @@ const acceptNumber = () => {
       </div>
 
       <div class="mb-3">
-        <label class="block font-semibold text-grey-darkest mb-1">Phone</label>
+        <label class="block font-semibold text-gray-800 mb-1">Phone</label>
 
         <CommonTextInput
           v-model="form.phone"
@@ -87,25 +90,33 @@ const acceptNumber = () => {
       </div>
 
       <div class="mb-3">
-        <label class="block font-semibold text-grey-darkest mb-1"
-          >Message</label
-        >
+        <label class="block font-semibold text-gray-800 mb-1">Message</label>
 
         <CommonTextArea v-model="form.message" />
 
         <CommonErrorField :errors="errors['message']" />
       </div>
 
-      <button class="btn btn-secondary" type="submit">Submit</button>
+      <button
+        class="btn btn-secondary"
+        type="submit"
+      >
+        Submit
+      </button>
       <div class="mb-3">
         <CommonErrorField :errors="errors['response']" />
       </div>
     </form>
 
     <!-- Submitted Message -->
-    <div v-if="submitted" class="text-center my-12">
-      <div class="text-2xl font-bold text-grey-darkest mb-2">Thank you.</div>
-      <div class="text-lg font-semibold text-grey-darker">
+    <div
+      v-if="submitted"
+      class="text-center my-12"
+    >
+      <div class="text-2xl font-bold text-gray-800 mb-2">
+        Thank you.
+      </div>
+      <div class="text-lg font-semibold text-gray-700">
         Your message has been received.
       </div>
     </div>

package/dist/runtime/components/forms/SwitchInput.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, toRefs } from "vue";
 import type { SwitchInputClassObj } from "../../@types/components";
 import { useClassBinding } from "../../composables/useClassBinding";
 
@@ -55,38 +55,58 @@ const { classBinding } = useClassBinding();
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .switch-button-control {
   display: flex;
   flex-direction: row;
   align-items: center;
-}
-.switch-button-control .switch-button {
-  height: 1.6em;
-  width: calc(1.6em * 2);
-  border: 2px solid var(--color);
-  box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.33);
-  border-radius: 1.6em;
-  transition: all 0.3s ease-in-out;
-  cursor: pointer;
-}
-.switch-button-control .switch-button .button {
-  height: calc(1.6em - 2 * 2px);
-  width: calc(1.6em - 2 * 2px);
-  border: 2px solid var(--color);
-  border-radius: calc(1.6em - 2 * 2px);
-  background: var(--color);
-  transition: all 0.3s ease-in-out;
-}
-.switch-button-control .switch-button.enabled {
-  background-color: var(--color);
-  box-shadow: none;
-}
-.switch-button-control .switch-button.enabled .button {
-  background: white;
-  transform: translateX(calc(calc(1.6em - 2 * 2px) + 2 * 2px));
-}
-.switch-button-control .switch-button-label {
-  margin-left: 10px;
+
+  .switch-button {
+    --switch-button-height: 1.6em;
+    --switch-button-color: var(--color);
+    --switch-button-border-thickness: 2px;
+    --switch-transition: all 0.3s ease-in-out;
+    --switch-is-rounded: true;
+
+    height: var(--switch-button-height);
+    width: calc(var(--switch-button-height) * 2);
+    border: var(--switch-button-border-thickness) solid var(--switch-button-color);
+    box-shadow: inset 0 0 var(--switch-button-border-thickness) 0 rgba(0, 0, 0, 0.33);
+    border-radius: var(--switch-button-height);
+
+    transition: var(--switch-transition);
+
+    --button-side-length: calc(
+      var(--switch-button-height) - (2 * var(--switch-button-border-thickness))
+    );
+
+    cursor: pointer;
+
+    .button {
+      height: var(--button-side-length);
+      width: var(--button-side-length);
+      border: var(--switch-button-border-thickness) solid var(--switch-button-color);
+      border-radius: var(--button-side-length);
+      background: var(--switch-button-color);
+
+      transition: var(--switch-transition);
+    }
+
+    &.enabled {
+      background-color: var(--switch-button-color);
+      box-shadow: none;
+
+      .button {
+        background: white;
+        transform: translateX(
+          calc(var(--button-side-length) + (2 * var(--switch-button-border-thickness)))
+        );
+      }
+    }
+  }
+
+  .switch-button-label {
+    margin-left: 10px;
+  }
 }
 </style>

package/dist/runtime/components/forms/TextArea.vue

@@ -21,6 +21,6 @@ const onInput = (e) => {
       class="form-input"
       rows="4"
       @change="onInput"
-    ></textarea>
+    />
   </span>
 </template>

package/dist/runtime/components/forms/TextInput.vue

@@ -37,5 +37,5 @@ const { classObject } = toRefs(props);
     :value="props.modelValue"
     :placeholder="placeholder"
     @change="changeInput"
-  />
+  >
 </template>

package/dist/runtime/components/layouts/Accordion.vue

@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 // data
-const { title, tabContent, contentObject } = toRefs(props);
+const { title, tabContent } = toRefs(props);
 const active = ref<boolean>(false);
 
 // computed
@@ -43,7 +43,7 @@ const tabTitleValues = computed(() => {
       v-if="tabContent.type === 'url'"
       :href="tabContent.content"
       target="_blank"
-      class="py-3 block no-underline w-full font-hairline inline-flex items-center text-md my-1"
+      class="py-3 block w-full font-extralight inline-flex items-center text-md my-1"
       :class="tabTitleValues.classes"
     >
       <span class="flex-initial">
@@ -53,7 +53,7 @@ const tabTitleValues = computed(() => {
     <a
       v-else
       href="#"
-      class="py-3 block no-underline w-full font-hairline inline-flex items-center text-md my-1"
+      class="py-3 block w-full font-extralight inline-flex items-center text-md my-1"
       :class="tabTitleValues.classes"
       @click.prevent="active = !active"
     >
@@ -63,16 +63,21 @@ const tabTitleValues = computed(() => {
         class="font-black flex-initial"
         style="width: 0.75rem"
       >
-        <CommonSvgIcon icon="downarrow"></CommonSvgIcon>
+        <CommonSvgIcon icon="downarrow" />
       </span>
       <span
         v-show="active"
         class="font-black flex-initial"
         style="width: 0.75rem"
       >
-        <CommonSvgIcon class="invert" icon="downarrow"></CommonSvgIcon>
+        <CommonSvgIcon
+          class="invert"
+          icon="downarrow"
+        />
       </span>
     </a>
-    <div v-show="active"><slot /></div>
+    <div v-show="active">
+      <slot />
+    </div>
   </div>
 </template>