@icvdeveloper/common-module 1.4.14 → 2.1.0

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

@@ -0,0 +1,154 @@
+<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, 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, selectedConversation } = storeToRefs(conversationStore);
+
+// 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{animation:fadeIn;animation-duration:.3s;animation-timing-function:ease-in-out;background:#fff;border-radius:10px;bottom:100px;box-shadow:0 7px 40px 2px hsla(210,1%,58%,.1);box-sizing:border-box;display:flex;flex-direction:column;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;height:calc(100% - 120px);justify-content:space-between;max-height:590px;position:fixed;right:25px;width:370px;z-index:999}.chat-window.closed{bottom:90px;display:none;opacity:0}@keyframes fadeIn{0%{display:none;opacity:0}to{display:flex;opacity:1}}@media (max-width:450px){.chat-window{border-radius:0;bottom:0;height:100%;max-height:100%;right:0;transition:.1s ease-in-out;width:100%}.chat-window.closed{bottom:0}}
+</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,27 @@
+<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"
+    >
+      <CommonSvgIcon icon="close" />
+    </span>
+  </div>
+</template>

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

@@ -77,14 +77,17 @@ const toggle = () => {
       </button>
     </div>
 
-    <transition name="slide" mode="out-in">
+    <transition
+      name="slide"
+      mode="out-in"
+    >
       <div
         v-show="expanded"
         :class="
           classBinding(
             classObject,
             'dropdownContainer',
-            'rounded px-4 pt-3 pb-1 bg-grey-lighter'
+            'rounded px-4 pt-3 pb-1 bg-gray-200'
           )
         "
       >
@@ -94,13 +97,12 @@ const toggle = () => {
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .slide-enter-active,
 .slide-leave-active {
   overflow: hidden;
   transition: all 0.4s ease;
 }
-
 .slide-enter,
 .slide-leave-to {
   transform-origin: top;
@@ -108,18 +110,16 @@ const toggle = () => {
   opacity: 0;
   height: -10px;
 }
-
 .chevron {
   transition: 0.3s all cubic-bezier(1, 0.25, 0.25, 0.8);
   will-change: transform;
+  &.down {
+    transform: rotate(180deg);
+  }
+  &.normal {
+    transform: rotate(0deg);
+  }
 }
-.chevron.down {
-  transform: rotate(180deg);
-}
-.chevron.normal {
-  transform: rotate(0deg);
-}
-
 .outline-none {
   outline: none;
 }

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

@@ -1,11 +1,11 @@
 <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 { VueEternalLoading } from "@ts-pro/vue-eternal-loading";
 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";
@@ -14,6 +14,8 @@ import type {
   AttendeeListClassObj,
   AttendeeListCompObj,
 } from "../../@types/components";
+import type { LoadAction } from "@ts-pro/vue-eternal-loading";
+import type { User } from "../../models/user";
 
 type Props = {
   classObject?: AttendeeListClassObj;
@@ -63,6 +65,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 +98,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();
   }
 };
@@ -152,7 +155,7 @@ watch(isLoggedIn, () => {
           "
           placeholder="Search..."
           @input="filterUsers"
-        />
+        >
         <span
           :class="
             classBinding(classObject, 'closeContainer', 'ml-2 cursor-pointer')
@@ -162,7 +165,7 @@ watch(isLoggedIn, () => {
           <CommonSvgIcon
             icon="close"
             class="fill-current text-black flex items-center justify-center"
-          ></CommonSvgIcon>
+          />
         </span>
       </div>
     </div>
@@ -212,9 +215,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 +233,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 +249,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 +296,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 +306,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>
@@ -340,9 +346,9 @@ watch(isLoggedIn, () => {
             <button
               v-if="
                 isLoggedIn &&
-                user.id !== currentUser.id &&
-                user.online &&
-                user.video_chat
+                  user.id !== currentUser.id &&
+                  user.online &&
+                  user.video_chat
               "
               :class="
                 classBinding(
@@ -361,26 +367,15 @@ watch(isLoggedIn, () => {
       <VueEternalLoading
         v-model:is-initial="isInitial"
         :load="load"
-      ></VueEternalLoading>
+      >
+        <template #no-more>
+          &nbsp;
+        </template>
+      </VueEternalLoading>
     </div>
   </div>
 </template>
 
 <style>
-.user-container {
-  max-height: 400px;
-  height: 400px;
-}
-
-.user-list-item {
-  border-top: 6px solid rgb(31, 60, 249);
-}
-
-.min-height-paragraph {
-  min-height: 1em;
-}
-
-.max-w-100 {
-  max-width: 100px;
-}
+.user-container{height:400px;max-height:400px}.user-list-item{border-top:6px solid #1f3cf9}.min-height-paragraph{min-height:1em}.max-w-100{max-width:100px}
 </style>

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

@@ -80,7 +80,7 @@ const clockStyle = computed(() => {
 
 const fontClass = computed(() => {
   const fontBase = "font-bold";
-  return props.isCompact === true
+  return props.isCompact
     ? fontBase + " text-xl lg:text-2xl"
     : fontBase + " text-2xl lg:text-4xl";
 });
@@ -139,7 +139,10 @@ onUnmounted(() => {
         )
       "
     >
-      <div v-if="showStatusText" class="flex-initial">
+      <div
+        v-if="showStatusText"
+        class="flex-initial"
+      >
         <h1
           :class="
             classBinding(
@@ -195,7 +198,11 @@ onUnmounted(() => {
             >
               {{ days }}
             </div>
-            <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
+            <transition
+              v-if="clockStyle == 'dials'"
+              name="slide"
+              mode="out-in"
+            >
               <div
                 :key="days"
                 :class="[fontClass, classBinding(classObject, 'unit', '')]"
@@ -238,7 +245,11 @@ onUnmounted(() => {
             >
               {{ hours }}
             </div>
-            <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
+            <transition
+              v-if="clockStyle == 'dials'"
+              name="slide"
+              mode="out-in"
+            >
               <div
                 :key="hours"
                 :class="[fontClass, classBinding(classObject, 'unit', '')]"
@@ -281,7 +292,11 @@ onUnmounted(() => {
             >
               {{ minutes }}
             </div>
-            <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
+            <transition
+              v-if="clockStyle == 'dials'"
+              name="slide"
+              mode="out-in"
+            >
               <div
                 :key="minutes"
                 :class="[fontClass, classBinding(classObject, 'unit', '')]"
@@ -328,7 +343,11 @@ onUnmounted(() => {
             >
               {{ seconds }}
             </div>
-            <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
+            <transition
+              v-if="clockStyle == 'dials'"
+              name="slide"
+              mode="out-in"
+            >
               <div
                 :key="seconds"
                 :class="[fontClass, classBinding(classObject, 'unit', '')]"
@@ -343,35 +362,34 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style scoped>
-.countdown-timer.compact .countdown-container {
-  @apply pt-0 mx-0;
-}
-.countdown-timer.compact h1 {
-  @apply text-xl;
-}
-.countdown-timer.compact .units-container {
-  @apply p-4 mt-1;
-}
-.countdown-timer.compact .unit-container.windows {
-  width: 60px;
+<style lang="postcss" 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;
+  @apply pb-4 uppercase tracking-wider;
 }
-
 .unit-label-container.dials {
   @apply mx-0;
   padding-top: 2px;
@@ -381,7 +399,6 @@ onUnmounted(() => {
   border-bottom: 1px solid #ddd;
   background-image: linear-gradient(#fafafa, #efefef, #e6e6e6);
 }
-
 .unit-label-container.dials.last {
   width: 67px;
 }
@@ -390,12 +407,10 @@ onUnmounted(() => {
 .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;
@@ -411,66 +426,67 @@ onUnmounted(() => {
   position: relative;
   overflow: hidden;
 }
-
 .dropshade:before,
 .dropshade:after {
   content: "";
   position: absolute;
   z-index: 1;
   top: 18px;
-  bottom: 0px;
+  bottom: 0;
   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));
+  -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,
-  .countdown-timer.fullsize .unit-container.dials {
-    width: 80px;
-    height: 46px;
-  }
-  .countdown-timer.fullsize .unit-label-container.dials.last {
-    width: 77px;
-  }
-  .countdown-timer.fullsize .dropshade:before {
-    left: -84px;
-  }
-  .countdown-timer.fullsize .dropshade:after {
-    left: -4px;
-  }
-  .countdown-timer.fullsize .dropshade.last:after {
-    left: -8px;
+  .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%);
 }