@icvdeveloper/common-module 1.4.14 → 2.0.0

package/dist/runtime/components/chat/ChatWindow.vue

@@ -0,0 +1,211 @@
+<script>
+export var MenuOptions = /* @__PURE__ */ ((MenuOptions2) => {
+  MenuOptions2["LIST"] = "ChatConversationlist";
+  MenuOptions2["CREATE"] = "CreateConversation";
+  MenuOptions2["CREATEGROUP"] = "CreateGroupConversation";
+  MenuOptions2["SHOW"] = "ShowConversation";
+  return MenuOptions2;
+})(MenuOptions || {});
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, toRefs, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { 
+  clearConversationEventHook,
+  createConversationEventHook,
+  setSelectedConversationEventHook
+} from '../../composables/useEventHooks';
+import { useConversationStore } from '#imports';
+import type { Conversation } from "../../models/conversation";
+import type { User } from "../../models/user";
+
+type Menus = {
+  [key: string]: {
+    conversation?: Conversation;
+    header: {
+      showCloseButton: boolean;
+      showPlusIcon: boolean;
+      title: string;
+      onAdd: Function;
+      onClose: Function;
+    }
+  }
+}
+
+const conversationStore = useConversationStore();
+
+const { chatOpen, conversations, selectedConversation, user, users } = storeToRefs(conversationStore);
+
+// emits
+const emit = defineEmits<{
+  (event: 'close'): void;
+}>();
+
+// data
+const selectedMenu = ref<MenuOptions>(MenuOptions.LIST);
+
+const menus: Menus = {
+  ChatConversationList: {
+    header: {
+      showCloseButton: false,
+      showPlusIcon: true,
+      title: "",
+      onAdd: () => {
+        selectedMenu.value = MenuOptions.LIST;
+      },
+      onClose: () => {},
+    },
+  },
+  CreateConversation: {
+    header: {
+      showCloseButton: true,
+      showPlusIcon: false,
+      title: "",
+      onAdd: () => {},
+      onClose: () => {
+        selectedMenu.value = MenuOptions.CREATE;
+      },
+    },
+  },
+  CreateGroupConversation: {
+    header: {
+      showCloseButton: true,
+      showPlusIcon: false,
+      title: "",
+      onAdd: () => {},
+      onClose: () => {
+        selectedMenu.value = MenuOptions.CREATEGROUP;
+      },
+    },
+  },
+  ShowConversation: {
+    conversation: {},
+    header: {
+      showCloseButton: true,
+      showPlusIcon: false,
+      title: "",
+      onAdd: () => {},
+      onClose: () => {
+        clearConversationEventHook.trigger(selectedConversation.value);
+        selectedMenu.value = MenuOptions.SHOW;
+      },
+    },
+  },
+};
+
+// computed
+const currentMenuConfig = computed(() => {
+  return menus[selectedMenu.value];
+});
+
+// methods
+const createConversation = (selected: User[]): void => {
+  createConversationEventHook.trigger(selected);
+  selectedMenu.value = MenuOptions.LIST;
+};
+
+const setSelectedConversation = (conversation: Conversation) => {
+  setSelectedConversationEventHook.trigger(conversation);
+  selectedMenu.value = MenuOptions.SHOW;
+};
+
+const setSelectedMenu = (_menu: MenuOptions) => {
+  selectedMenu.value = _menu;
+};
+
+// watchers
+watch(selectedConversation, (_newConversation, _oldConversation) => {
+  selectedConversation.value = _newConversation;
+  if (Object.keys(_newConversation as Conversation).length > 0) {
+    if (selectedMenu.value !== MenuOptions.SHOW) {
+      selectedMenu.value = MenuOptions.SHOW;
+    }
+  }
+});
+</script>
+
+
+<template>
+  <div
+    :class="[{ opened: chatOpen, closed: !chatOpen }, 'chat-window']"
+  >
+    <CommonChatHeader
+      @item-selected="setSelectedMenu"
+    />
+
+    <CommonChatConversationList
+      v-if="selectedMenu === MenuOptions.LIST"
+    />
+
+    <CommonChatCreateConversation
+      v-if="selectedMenu === MenuOptions.CREATE"
+      @on-create="createConversation"
+    />
+
+    <CommonChatCreateGroupConversation
+      v-if="selectedMenu === MenuOptions.CREATEGROUP"
+      @on-create="createConversation"
+    />
+
+    <CommonChatShowConversation
+      v-if="selectedMenu === MenuOptions.SHOW"
+    />
+  </div>
+</template>
+
+<style scoped>
+.chat-window {
+  z-index: 999;
+  width: 370px;
+  height: calc(100% - 120px);
+  max-height: 590px;
+  position: fixed;
+  right: 25px;
+  bottom: 100px;
+  box-sizing: border-box;
+  box-shadow: 0px 7px 40px 2px rgba(148, 149, 150, 0.1);
+  background: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: 10px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  animation: fadeIn;
+  animation-duration: 0.3s;
+  animation-timing-function: ease-in-out;
+}
+.chat-window.closed {
+  opacity: 0;
+  display: none;
+  bottom: 90px;
+}
+
+@keyframes fadeIn {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+  100% {
+    display: flex;
+    opacity: 1;
+  }
+}
+
+@media (max-width: 450px) {
+  .chat-window {
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    right: 0px;
+    bottom: 0px;
+    border-radius: 0px;
+  }
+  .chat-window {
+    transition: 0.1s ease-in-out;
+  }
+  .chat-window.closed {
+    bottom: 0px;
+  }
+}
+</style>

package/dist/runtime/components/chat/ChatWindow.vue.d.ts

@@ -0,0 +1,6 @@
+export declare enum MenuOptions {
+    LIST = "ChatConversationlist",
+    CREATE = "CreateConversation",
+    CREATEGROUP = "CreateGroupConversation",
+    SHOW = "ShowConversation"
+}

package/dist/runtime/components/chat/MessageInput.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+const message = ref<string>('');
+
+// emits
+const emit = defineEmits<{
+  (event: 'sendMessage', value: string): void
+}>();
+</script>
+
+<template>
+  <form @submit.prevent="[emit('sendMessage', message), message = '']">
+    <div class="flex overflow-hidden">
+      <input
+        v-model="message"
+        type="text"
+        class="message w-full px-4 py-4 border-l-0 border-b-0 border-r-0"
+        style="border-top-width: 1px; border-color: rgba(0,0,0,0.15)"
+        placeholder="Type a message..."
+      >
+    </div>
+  </form>
+</template>
+
+<style scoped>
+  .message {
+    border-bottom-left-radius: 9px;
+    border-bottom-right-radius: 9px;
+  }
+</style>

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

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+const searchValue = ref<string>('');
+
+// emits
+const emit = defineEmits<{
+  (event: 'clear'): void;
+  (event: 'onChange', value: string): void
+}>();
+
+// methods
+const clear = (): void => {
+  emit('clear');
+};
+</script>
+<template>
+  <div class="relative">
+    <input
+      v-model="searchValue"
+      type="text"
+      class="w-full pl-2 pr-5 py-3"
+      placeholder="Search..."
+      @input="emit('onChange', searchValue)"
+    >
+    <span
+      class="pin-r absolute mt-3 mr-5 cursor-pointer"
+      @click="clear"
+    >
+      <SvgIcon icon="close" />
+    </span>
+  </div>
+</template>

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

@@ -84,7 +84,7 @@ const toggle = () => {
           classBinding(
             classObject,
             'dropdownContainer',
-            'rounded px-4 pt-3 pb-1 bg-grey-lighter'
+            'rounded px-4 pt-3 pb-1 bg-gray-200'
           )
         "
       >

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

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
-import { ref, onBeforeUnmount } from "vue";
+import { ref, toRefs, onBeforeUnmount, watch } from "vue";
 import { storeToRefs } from "pinia";
 import { debounce } from "lodash-es";
 import { VueEternalLoading, LoadAction } from "@ts-pro/vue-eternal-loading";
 import type { User } from "../../models/user";
 import { PAGE_LENGTH } from "../../models/pagination";
 import { useAttendeeListStore } from "../../store/attendeeList";
+import { useAuthStore } from "../../store/auth";
 import { useConversationStore } from "../../store/conversations";
 import { useUserStore } from "../../store/user";
 import { usePusher } from "../../composables/usePusher";
@@ -63,6 +64,7 @@ const filterUsers = debounce(async () => {
 }, 500);
 
 const load = async ({ loaded }: LoadAction): Promise<void> => {
+  console.log('loading more!!!!');
   currentPage.value += 1;
   const existingList: User[] = loadedUsersRef.value;
   const loadedItems = await getAttendeeList({
@@ -95,12 +97,12 @@ const resetAll = async () => {
 };
 
 const createChatConversation = async (user: User) => {
-  const users: User[] = [];
+  const users: User[] = [] as User[];
   users.push(user);
 
   await createConversation(users);
 
-  if (!chatOpen) {
+  if (!chatOpen.value) {
     toggleChat();
   }
 };
@@ -119,7 +121,7 @@ onBeforeUnmount(() => {
 
 watch(isLoggedIn, () => {
   if (isLoggedIn.value) {
-    joinPresenceChannel();
+    // joinPresenceChannel();
   }
 });
 </script>
@@ -152,7 +154,7 @@ watch(isLoggedIn, () => {
           "
           placeholder="Search..."
           @input="filterUsers"
-        />
+        >
         <span
           :class="
             classBinding(classObject, 'closeContainer', 'ml-2 cursor-pointer')
@@ -162,7 +164,7 @@ watch(isLoggedIn, () => {
           <CommonSvgIcon
             icon="close"
             class="fill-current text-black flex items-center justify-center"
-          ></CommonSvgIcon>
+          />
         </span>
       </div>
     </div>
@@ -212,9 +214,9 @@ watch(isLoggedIn, () => {
                   'w-full max-w-100 aspect-square'
                 )
               "
-              :src="user.profile_image"
+              :src="user.profile_image as string"
               alt=""
-            />
+            >
           </div>
 
           <div :class="classBinding(classObject, 'attendeeContentInner', '')">
@@ -230,13 +232,15 @@ watch(isLoggedIn, () => {
               <span
                 v-if="user.name"
                 :class="classBinding(classObject, 'attendeeNameEmail', 'pl-2')"
-                >{{ user.name }}</span
               >
+                {{ user.name }}
+              </span>
               <span
                 v-else
                 :class="classBinding(classObject, 'attendeeNameEmail', 'pl-2')"
-                >{{ user.email }}</span
               >
+                {{ user.email }}
+              </span>
               <span
                 v-if="isLoggedIn"
                 :class="
@@ -244,16 +248,17 @@ watch(isLoggedIn, () => {
                 "
               >
                 <CommonSvgIcon
-                  :icon="[user.online ? 'online' : 'offline']"
+                  :icon="user.online ? 'online' : 'offline'"
                   width="0"
                   class="w-4 my-0 mr-1 inline-block"
-                ></CommonSvgIcon>
+                />
                 <span
                   :class="
                     classBinding(classObject, 'statusText', 'inline-block')
                   "
-                  >{{ user.online ? "online" : "offline" }}</span
                 >
+                  {{ user.online ? "online" : "offline" }}
+                </span>
               </span>
             </p>
 
@@ -290,7 +295,7 @@ watch(isLoggedIn, () => {
                 :class="classBinding(classObject, 'socialLink', 'mr-2')"
                 :aria-label="user.name + ` Twitter Page`"
               >
-                <span><CommonSvgIcon icon="twitter"></CommonSvgIcon></span>
+                <span><CommonSvgIcon icon="twitter" /></span>
               </a>
 
               <a
@@ -300,7 +305,7 @@ watch(isLoggedIn, () => {
                 :class="classBinding(classObject, 'socialLink', 'mr-2')"
                 :aria-label="user.name + ` LinkedIn Page`"
               >
-                <span><CommonSvgIcon icon="linkedin"></CommonSvgIcon></span>
+                <span><CommonSvgIcon icon="linkedin" /></span>
               </a>
             </span>
           </div>
@@ -361,7 +366,11 @@ watch(isLoggedIn, () => {
       <VueEternalLoading
         v-model:is-initial="isInitial"
         :load="load"
-      ></VueEternalLoading>
+      >
+        <template #no-more>
+          &nbsp;
+        </template>
+      </VueEternalLoading>
     </div>
   </div>
 </template>

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

@@ -369,7 +369,7 @@ onUnmounted(() => {
 }
 
 .unit-label-container.windows {
-  @apply pb-4 uppercase tracking-wide;
+  @apply pb-4 uppercase tracking-wider;
 }
 
 .unit-label-container.dials {

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

@@ -16,7 +16,7 @@ type Props = {
   classObject?: modalClassObj;
 };
 
-// classObject.components.svgIcon is not functioning properly and cannot be passed to svgIcon component
+// TODO - classObject.components.svgIcon is not functioning properly and cannot be passed to svgIcon component
 const props = withDefaults(defineProps<Props>(), {
   visible: false,
   modalSize: "50",
@@ -45,8 +45,8 @@ const { visible, modalSize, noScroll, showClose, usePadding, classObject } =
 const { classBinding } = useClassBinding();
 
 const modalClass = computed(() => {
-  const padding = usePadding.value ? "p-6" : "";
-  const classes = `relative w-full ${padding} m-auto flex-col flex rounded shadow bg-white modal-box`;
+  const paddingValue = usePadding.value ? 'sm:p-6 sm:pt-6' : '';
+  const classes = `relative w-full ${paddingValue} m-auto flex-col flex border border-white sm:border-none sm:rounded shadow bg-white modal-box`;
   if (noScroll.value) {
     return classes + ` max-h-full overflow-hidden`;
   } else {
@@ -61,20 +61,22 @@ const closeModal = () => {
 const clicked = () => {
   emit("clicked");
 };
+
+// NOTE: to properly destroy/unmount this component and its contents, use v-if on this component's tag in the parent component/page
 </script>
 
 <template>
   <Transition>
     <div
-      v-if="visible"
+      v-show="visible"
       :class="
         classBinding(
           classObject,
           'modalPositionContainer',
-          'fixed top-0 bottom-0 left-0 right-0 z-50 flex bg-smoke-light p-3'
+          'fixed top-0 bottom-0 left-0 right-0 z-50 flex bg-smoke-400 md:p-3'
         )
       "
-      @click="clicked"
+      @click.self="clicked, closeModal()"
     >
       <div
         class="custom-max-width max-h-full"
@@ -87,17 +89,23 @@ const clicked = () => {
             classBinding(
               classObject,
               'modalCloseContainer',
-              'absolute top-0 bottom-0 right-0 z-30 max-h-1em'
+              'absolute top-0 right-0 z-30 max-h-1em'
             )
           "
         >
           <button
-            :class="classBinding(classObject, 'modalButton', 'p-3')"
+            :class="classBinding(classObject, 'modalButton', 'p-2')"
             @click="closeModal()"
           >
-            <span :class="classBinding(classObject, 'modalButtonIcon', '')"
-              ><CommonSvgIcon icon="close" width=".7rem"
-            /></span>
+            <span :class="classBinding(classObject, 'modalButtonIcon', '')">
+              <CommonSvgIcon
+                icon="close"
+                width=".7rem"
+                :class-object="{
+                  container: 'rounded-full bg-white sm:bg-none p-1 sm:p-0'
+                }"
+              />
+            </span>
           </button>
         </span>
 
@@ -113,12 +121,12 @@ const clicked = () => {
   max-height: 1em;
 }
 
-.bg-smoke-light {
+.bg-smoke-400 {
   background-color: rgba(0, 0, 0, 0.4);
 }
 
 .custom-max-width {
-  max-width: 85%;
+  max-width: 100%;
 }
 @screen lg {
   .custom-max-width {

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

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { ref, toRefs } from "vue";
+
+type Props = {
+  modalSize: string;
+  closeOnClick?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  closeOnClick: true,
+});
+
+const { closeOnClick } = toRefs(props);
+
+// data
+const showModal = ref<boolean>(false);
+
+// methods
+const closeIfAllowed = () => {
+  if (closeOnClick.value) showModal.value = false;
+};
+</script>
+
+<template>
+  <span>
+    <CommonModal
+      v-if="showModal"
+      @trigger="showModal = false"
+      @clicked="closeIfAllowed"
+    >
+      <div id="modal-title">
+        <slot name="title" />
+      </div>
+      <div id="modal-body">
+        <slot name="body" />
+      </div>
+    </CommonModal>
+
+    <VButton @click="showModal = true">
+      <template #button> Show Modal </template>
+    </VButton>
+  </span>
+</template>

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

@@ -60,7 +60,7 @@ const combinedNavItems = computed(() => {
 <template>
   <div>
     <div class="flex flex-col">
-      <header class="min-w-full flex sticky pin-t z-50">
+      <header class="min-w-full flex sticky top-0 z-50">
         <!-- Standard Screen Nav -->
         <div
           class="hidden flex-1 flex-col mx-auto min-w-full"
@@ -73,7 +73,7 @@ const combinedNavItems = computed(() => {
           ></CommonDynamicHtml>
 
           <nav class="flex flex-1 min-h-8 content-center">
-            <ul class="list-reset h-full">
+            <ul class="h-full">
               <li v-for="(item, index) in combinedNavItems" :key="index">
                 <nuxt-link
                   v-if="!isExternalLink(item)"
@@ -123,7 +123,7 @@ const combinedNavItems = computed(() => {
 
           <div class="flex">
             <nav :class="open ? 'flex' : 'hidden'" class="w-full">
-              <ul class="flex-col self-center list-reset mx-auto">
+              <ul class="flex-col self-center mx-auto">
                 <li v-for="(item, index) in combinedNavItems" :key="index">
                   <nuxt-link
                     v-if="!isExternalLink(item)"