@icvdeveloper/common-module 0.0.127 → 0.0.128

package/dist/runtime/components/presenters/PresenterModal.vue

@@ -1,223 +1,223 @@
-<script lang="ts" setup>
-import { ref, toRefs } from "vue";
-import { Presenter } from "../../models/conference";
-import { usePresenter } from "../../composables/usePresenter";
-import { useClassBinding } from "../../composables/useClassBinding";
-import {
-  presenterModalClassObj,
-  presenterListingClassObj,
-  presenterModalCompObj,
-  svgIconClassObj,
-  modalContentClassObj,
-  modalClassObj,
-  modalCompObj,
-} from "../../@types/components";
-import { Position } from "../../enums/general";
-
-type Props = {
-  presenter: Presenter;
-  enableBio?: boolean;
-  showBio?: boolean;
-  isSmallGroupedTrack?: boolean;
-  bioLinkOnName?: boolean;
-  bioLinkText?: string;
-  useIcon?: boolean;
-  bioLinkPosition?: Position;
-  imagePosition?: Position;
-  classObject?: presenterModalClassObj;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  useIcon: true,
-  enableBio: true,
-  showBio: false,
-  isSmallGroupedTrack: false,
-  bioLinkOnName: true,
-  bioLinkText: "Read More >",
-  bioLinkPosition: Position.BOTTOM,
-  imagePosition: Position.LEFT,
-
-  classObject: () => {
-    return {
-      container: "",
-      iconContainer: "",
-      components: ref<presenterModalCompObj>({
-        presenterListing: ref<presenterListingClassObj>({}),
-        svgIcon: ref<svgIconClassObj>({}),
-        modal: ref<modalClassObj>({}),
-        modalContent: ref<modalContentClassObj>({}),
-      }),
-    };
-  },
-});
-
-const {
-  presenter,
-  useIcon,
-  enableBio,
-  showBio,
-  isSmallGroupedTrack,
-  bioLinkOnName,
-  bioLinkText,
-  bioLinkPosition,
-  imagePosition,
-  classObject,
-} = toRefs(props);
-const modalVisible = ref<boolean>(false);
-const { classBinding } = useClassBinding();
-
-// methods
-const { fullName, presenterImageStyle, itemWidthStyle, isGrayScale } =
-  usePresenter(presenter);
-</script>
-
-<template>
-  <div>
-    <div
-      v-if="useIcon"
-      :class="
-        classBinding(
-          classObject,
-          'iconContainer',
-          'presenter-icon cursor-pointer'
-        )
-      "
-    >
-      <CommonSvgIcon
-        icon="info"
-        :greyscale="isGrayScale"
-        :class="classBinding(classObject.components.svgIcon, 'container', '')"
-        :class-object="classObject.components.svgIcon"
-        @click="modalVisible = true"
-      ></CommonSvgIcon>
-    </div>
-
-    <CommonPresenterListing
-      v-else
-      :presenter="presenter"
-      :enable-bio="enableBio"
-      :show-bio="showBio"
-      :is-small-grouped-track="isSmallGroupedTrack"
-      :bio-link-on-name="bioLinkOnName"
-      :bio-link-text="bioLinkText"
-      :bio-link-position="bioLinkPosition"
-      :image-position="imagePosition"
-      text-class="font-bold text-base"
-      link-class="agenda-presenter-color"
-      :class="
-        classBinding(classObject.components.presenterListing, 'container', '')
-      "
-      :class-object="classObject.components.presenterListing"
-      @clicked="modalVisible = true"
-    >
-    </CommonPresenterListing>
-
-    <CommonModal
-      :visible="modalVisible"
-      :class="classBinding(classObject.components.modal, 'container', '')"
-      :class-object="classObject.components.modal"
-      @trigger="modalVisible = false"
-    >
-      <template #modal-title>
-        <div
-          :class="
-            classBinding(
-              classObject.components.modalContent,
-              'modalTitle',
-              'flex flex-col lg:flex-row w-full pb-8 mb-8 border-b border-solid border-grey-light'
-            )
-          "
-        >
-          <div
-            :class="
-              classBinding(
-                classObject.components.modalContent,
-                'modalImagePositionContainer',
-                'flex-1 mb-6 lg:mb-0 lg:flex-initial flex justify-center'
-              )
-            "
-          >
-            <div
-              v-if="presenter.photo"
-              :style="presenterImageStyle"
-              :class="
-                classBinding(
-                  classObject.components.modalContent,
-                  'modalImageContainer',
-                  'border-white border-2 shadow-md bg-white'
-                )
-              "
-            >
-              <img
-                :src="presenter.photo"
-                :class="
-                  classBinding(
-                    classObject.components.modalContent,
-                    'modalImage',
-                    'invisible'
-                  )
-                "
-                :style="itemWidthStyle"
-              />
-            </div>
-          </div>
-          <div
-            :class="
-              classBinding(
-                classObject.components.modalContent,
-                'modalTextPositionContainer',
-                'flex-1 pl-4 text-center lg:text-left flex'
-              )
-            "
-          >
-            <div
-              :class="
-                classBinding(
-                  classObject.components.modalContent,
-                  'modalTextContainer',
-                  'flex-1 self-center'
-                )
-              "
-            >
-              <h1
-                :class="
-                  classBinding(
-                    classObject.components.modalContent,
-                    'modalName',
-                    'flex-1 font-light mb-0 body-color-4 presenter-name-color'
-                  )
-                "
-              >
-                {{ fullName }}
-              </h1>
-              <p
-                :class="
-                  classBinding(
-                    classObject.components.modalContent,
-                    'modalTitleCompany',
-                    'flex-1 font-normal text-base pt-2 leading-tight mb-0 body-color-5 presenter-title-color'
-                  )
-                "
-              >
-                {{ presenter.title }}<br />{{ presenter.company }}
-              </p>
-            </div>
-          </div>
-        </div>
-      </template>
-      <template #modal-body>
-        <p
-          :class="
-            classBinding(
-              classObject.components.modalContent,
-              'modalBio',
-              'font-normal text-center lg:text-left'
-            )
-          "
-        >
-          <span v-html="presenter.biography"></span>
-        </p>
-      </template>
-    </CommonModal>
-  </div>
-</template>
+<script lang="ts" setup>
+import { ref, toRefs } from "vue";
+import { Presenter } from "../../models/conference";
+import { usePresenter } from "../../composables/usePresenter";
+import { useClassBinding } from "../../composables/useClassBinding";
+import {
+  presenterModalClassObj,
+  presenterListingClassObj,
+  presenterModalCompObj,
+  svgIconClassObj,
+  modalContentClassObj,
+  modalClassObj,
+  modalCompObj,
+} from "../../@types/components";
+import { Position } from "../../enums/general";
+
+type Props = {
+  presenter: Presenter;
+  enableBio?: boolean;
+  showBio?: boolean;
+  isSmallGroupedTrack?: boolean;
+  bioLinkOnName?: boolean;
+  bioLinkText?: string;
+  useIcon?: boolean;
+  bioLinkPosition?: Position;
+  imagePosition?: Position;
+  classObject?: presenterModalClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  useIcon: true,
+  enableBio: true,
+  showBio: false,
+  isSmallGroupedTrack: false,
+  bioLinkOnName: true,
+  bioLinkText: "Read More >",
+  bioLinkPosition: Position.BOTTOM,
+  imagePosition: Position.LEFT,
+
+  classObject: () => {
+    return {
+      container: "",
+      iconContainer: "",
+      components: ref<presenterModalCompObj>({
+        presenterListing: ref<presenterListingClassObj>({}),
+        svgIcon: ref<svgIconClassObj>({}),
+        modal: ref<modalClassObj>({}),
+        modalContent: ref<modalContentClassObj>({}),
+      }),
+    };
+  },
+});
+
+const {
+  presenter,
+  useIcon,
+  enableBio,
+  showBio,
+  isSmallGroupedTrack,
+  bioLinkOnName,
+  bioLinkText,
+  bioLinkPosition,
+  imagePosition,
+  classObject,
+} = toRefs(props);
+const modalVisible = ref<boolean>(false);
+const { classBinding } = useClassBinding();
+
+// methods
+const { fullName, presenterImageStyle, itemWidthStyle, isGrayScale } =
+  usePresenter(presenter);
+</script>
+
+<template>
+  <div>
+    <div
+      v-if="useIcon"
+      :class="
+        classBinding(
+          classObject,
+          'iconContainer',
+          'presenter-icon cursor-pointer'
+        )
+      "
+    >
+      <CommonSvgIcon
+        icon="info"
+        :greyscale="isGrayScale"
+        :class="classBinding(classObject.components.svgIcon, 'container', '')"
+        :class-object="classObject.components.svgIcon"
+        @click="modalVisible = true"
+      ></CommonSvgIcon>
+    </div>
+
+    <CommonPresenterListing
+      v-else
+      :presenter="presenter"
+      :enable-bio="enableBio"
+      :show-bio="showBio"
+      :is-small-grouped-track="isSmallGroupedTrack"
+      :bio-link-on-name="bioLinkOnName"
+      :bio-link-text="bioLinkText"
+      :bio-link-position="bioLinkPosition"
+      :image-position="imagePosition"
+      text-class="font-bold text-base"
+      link-class="agenda-presenter-color"
+      :class="
+        classBinding(classObject.components.presenterListing, 'container', '')
+      "
+      :class-object="classObject.components.presenterListing"
+      @clicked="modalVisible = true"
+    >
+    </CommonPresenterListing>
+
+    <CommonModal
+      :visible="modalVisible"
+      :class="classBinding(classObject.components.modal, 'container', '')"
+      :class-object="classObject.components.modal"
+      @trigger="modalVisible = false"
+    >
+      <template #modal-title>
+        <div
+          :class="
+            classBinding(
+              classObject.components.modalContent,
+              'modalTitle',
+              'flex flex-col lg:flex-row w-full pb-8 mb-8 border-b border-solid border-grey-light'
+            )
+          "
+        >
+          <div
+            :class="
+              classBinding(
+                classObject.components.modalContent,
+                'modalImagePositionContainer',
+                'flex-1 mb-6 lg:mb-0 lg:flex-initial flex justify-center'
+              )
+            "
+          >
+            <div
+              v-if="presenter.photo"
+              :style="presenterImageStyle"
+              :class="
+                classBinding(
+                  classObject.components.modalContent,
+                  'modalImageContainer',
+                  'border-white border-2 shadow-md bg-white'
+                )
+              "
+            >
+              <img
+                :src="presenter.photo"
+                :class="
+                  classBinding(
+                    classObject.components.modalContent,
+                    'modalImage',
+                    'invisible'
+                  )
+                "
+                :style="itemWidthStyle"
+              />
+            </div>
+          </div>
+          <div
+            :class="
+              classBinding(
+                classObject.components.modalContent,
+                'modalTextPositionContainer',
+                'flex-1 pl-4 text-center lg:text-left flex'
+              )
+            "
+          >
+            <div
+              :class="
+                classBinding(
+                  classObject.components.modalContent,
+                  'modalTextContainer',
+                  'flex-1 self-center'
+                )
+              "
+            >
+              <h1
+                :class="
+                  classBinding(
+                    classObject.components.modalContent,
+                    'modalName',
+                    'flex-1 font-light mb-0 body-color-4 presenter-name-color'
+                  )
+                "
+              >
+                {{ fullName }}
+              </h1>
+              <p
+                :class="
+                  classBinding(
+                    classObject.components.modalContent,
+                    'modalTitleCompany',
+                    'flex-1 font-normal text-base pt-2 leading-tight mb-0 body-color-5 presenter-title-color'
+                  )
+                "
+              >
+                {{ presenter.title }}<br />{{ presenter.company }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #modal-body>
+        <p
+          :class="
+            classBinding(
+              classObject.components.modalContent,
+              'modalBio',
+              'font-normal text-center lg:text-left'
+            )
+          "
+        >
+          <span v-html="presenter.biography"></span>
+        </p>
+      </template>
+    </CommonModal>
+  </div>
+</template>