@icvdeveloper/common-module 0.0.49 → 0.0.51

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

@@ -1,139 +1,145 @@
-<script lang="ts" setup>
-import { find, get } from "lodash-es";
-import { toRefs, computed, defineAsyncComponent } from "vue";
-import { Icon, Icons } from "../../models/icons";
-import { svgIconClassObj } from "../../@types/components";
-import { useClassBinding } from "../../composables/useClassBinding";
-
-/**
- * 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")
-    ),
-  },
-  close: {
-    color: "#000",
-    component: defineAsyncComponent(
-      () => import("../../assets/svg/icon-close.svg")
-    ),
-  },
-};
-
-type Props = {
-  icon?: keyof Icons;
-  grayScale?: boolean;
-  width?: string;
-  classObject?: svgIconClassObj;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  icon: "info",
-  grayScale: false,
-  width: "20px",
-  classObject: () => {
-    return {
-      container: "",
-      svgElement: "",
-    };
-  },
-});
-
-const { icon, grayScale, width } = toRefs(props);
-const { classBinding } = useClassBinding();
-
-// 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"
-      :class="classBinding(classObject, 'svgElement', '')"
-    />
-  </div>
-</template>
+<script lang="ts" setup>
+import { find, get } from "lodash-es";
+import { toRefs, computed, defineAsyncComponent } from "vue";
+import { Icon, Icons } from "../../models/icons";
+import { svgIconClassObj } from "../../@types/components";
+import { useClassBinding } from "../../composables/useClassBinding";
+
+/**
+ * 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")
+    ),
+  },
+  close: {
+    color: "#000",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/icon-close.svg")
+    ),
+  },
+  chevron: {
+    color: "#000",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/icon-chevron.svg")
+    ),
+  },
+};
+
+type Props = {
+  icon?: keyof Icons;
+  grayScale?: boolean;
+  width?: string;
+  classObject?: svgIconClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: "info",
+  grayScale: false,
+  width: "20px",
+  classObject: () => {
+    return {
+      container: "",
+      svgElement: "",
+    };
+  },
+});
+
+const { icon, grayScale, width } = toRefs(props);
+const { classBinding } = useClassBinding();
+
+// 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"
+      :class="classBinding(classObject, 'svgElement', '')"
+    />
+  </div>
+</template>

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

@@ -1,37 +1,37 @@
-<script lang="ts" setup>
-import { ref, toRefs, computed } from "vue";
-
-interface Props {
-  presentationId: number | string;
-  modalSize?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modalSize: "full",
-});
-
-const { modalSize, presentationId } = toRefs(props);
-
-const showModal = ref<boolean>(false);
-
-const zoomUrl = computed(() => {
-  return `/zoom/${presentationId.value}/meeting`;
-});
-</script>
-
-<template>
-  <span>
-    <CommonModal
-      :visible="showModal"
-      :modal-size="modalSize"
-      @trigger="showModal = false"
-    >
-      <template #modal-body>
-        <iframe :src="zoomUrl" class="w-full h-full"></iframe>
-      </template>
-    </CommonModal>
-    <a class="no-underline" href="javascript:null" @click="showModal = true">
-      <slot name="modal-link"></slot>
-    </a>
-  </span>
-</template>
+<script lang="ts" setup>
+import { ref, toRefs, computed } from "vue";
+
+interface Props {
+  presentationId: number | string;
+  modalSize?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modalSize: "full",
+});
+
+const { modalSize, presentationId } = toRefs(props);
+
+const showModal = ref<boolean>(false);
+
+const zoomUrl = computed(() => {
+  return `/zoom/${presentationId.value}/meeting`;
+});
+</script>
+
+<template>
+  <span>
+    <CommonModal
+      :visible="showModal"
+      :modal-size="modalSize"
+      @trigger="showModal = false"
+    >
+      <template #modal-body>
+        <iframe :src="zoomUrl" class="w-full h-full"></iframe>
+      </template>
+    </CommonModal>
+    <a class="no-underline" href="javascript:null" @click="showModal = true">
+      <slot name="modal-link"></slot>
+    </a>
+  </span>
+</template>

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

@@ -1,133 +1,133 @@
-<script lang="ts" setup>
-import { toRefs, computed } from "vue";
-import { Conference } from "../../models/conference";
-import { useTemplateConfigsStore } from "../../store/templateConfigs";
-import { useConferencesStore } from "../../store/conferences";
-import { useConferenceHelpers } from "../../composables/useConferenceHelpers";
-
-interface Props {
-  conference?: Conference | null;
-  useEventText?: boolean;
-}
-
-// Component Props
-const props = withDefaults(defineProps<Props>(), {
-  useEventText: () =>
-    useTemplateConfigsStore().pagesConfigValue("main.use_event_text"),
-  conference: () => useConferencesStore().currentConference,
-});
-
-// stores
-const conferenceStore = useConferencesStore();
-const { globalConfigValue, pagesConfigValue } = useTemplateConfigsStore();
-
-// reactive data
-const { useEventText, conference } = toRefs(props);
-
-// helper functions
-const {
-  getConferenceDisplayDate,
-  showConferenceWebcastButton,
-  getConferenceWebcastUrl,
-  getConferenceWebcastButtonText,
-  showViewArchiveButton,
-  getViewArchiveUrl,
-  getViewArchiveButtonText,
-  showConferenceRegButton,
-  getConferenceRegUrl,
-  getConferenceRegText,
-} = useConferenceHelpers(conference);
-
-// computed properties
-const mainStyles = computed(() => {
-  if (useEventText.value) {
-    return {
-      "background-image": `url(${conference.value.photo_large})`,
-      "background-repeat": "no-repeat",
-      "background-size": "cover",
-      "background-position": "center",
-    };
-  } else {
-    return {};
-  }
-});
-
-const mutedHeaderStyle = computed(() => {
-  const muted = globalConfigValue("muted_photo_headers");
-  if (muted === "lighten") return "background-color: rgb(255, 255, 255, .4)";
-  if (muted === "darken") return "background-color: rgb(0, 0, 0, .4)";
-  return "";
-});
-
-const hasOtherButton = computed(() => {
-  return showViewArchiveButton() || showConferenceWebcastButton();
-});
-
-const mainBodyImage = computed(() => {
-  return conference.value.photo_large;
-});
-</script>
-
-<template>
-  <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"
-      :style="mutedHeaderStyle"
-    >
-      <h1
-        class="text-shadow font-bold heading-color-1 mt-4 mb-4 text-2xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl"
-      >
-        {{ conference.name }}
-      </h1>
-      <h1
-        v-if="conference.location"
-        class="text-shadow font-light heading-color-2 mb-2 text-2xl sm:text-l md:text-xl lg:text-2xl xl:text-3xl"
-      >
-        {{ conference.location }}
-      </h1>
-      <h3
-        v-if="pagesConfigValue('main.use_event_text_date')"
-        class="text-shadow font-light heading-color-2 mb-2 text-l sm:text-l md:text-xl lg:text-2xl xl:text-3xl"
-      >
-        {{ getConferenceDisplayDate() }}
-      </h3>
-
-      <div class="flex-row mt-6">
-        <!-- view test stream or webcast -->
-        <a
-          v-if="showConferenceWebcastButton()"
-          :href="getConferenceWebcastUrl()"
-          :target="/^http/.test(getConferenceWebcastUrl()) ? '_blank' : '_self'"
-        >
-          <button class="btn">
-            {{ getConferenceWebcastButtonText() }}
-          </button>
-        </a>
-
-        <!-- view archive -->
-        <a
-          v-if="showViewArchiveButton()"
-          :href="getViewArchiveUrl()"
-          :target="/^http/.test(getViewArchiveUrl()) ? '_blank' : '_self'"
-        >
-          <button class="btn">
-            {{ getViewArchiveButtonText() }}
-          </button>
-        </a>
-
-        <!-- register -->
-        <a
-          v-if="showConferenceRegButton()"
-          :href="getConferenceRegUrl()"
-          :target="/^http/.test(getConferenceRegUrl()) ? '_blank' : '_self'"
-        >
-          <button class="btn" :class="hasOtherButton ? 'md:ml-4' : ''">
-            {{ getConferenceRegText() }}
-          </button>
-        </a>
-      </div>
-    </div>
-    <img v-else :src="mainBodyImage" class="w-full h-auto" />
-  </div>
-</template>
+<script lang="ts" setup>
+import { toRefs, computed } from "vue";
+import { Conference } from "../../models/conference";
+import { useTemplateConfigsStore } from "../../store/templateConfigs";
+import { useConferencesStore } from "../../store/conferences";
+import { useConferenceHelpers } from "../../composables/useConferenceHelpers";
+
+interface Props {
+  conference?: Conference | null;
+  useEventText?: boolean;
+}
+
+// Component Props
+const props = withDefaults(defineProps<Props>(), {
+  useEventText: () =>
+    useTemplateConfigsStore().pagesConfigValue("main.use_event_text"),
+  conference: () => useConferencesStore().currentConference,
+});
+
+// stores
+const conferenceStore = useConferencesStore();
+const { globalConfigValue, pagesConfigValue } = useTemplateConfigsStore();
+
+// reactive data
+const { useEventText, conference } = toRefs(props);
+
+// helper functions
+const {
+  getConferenceDisplayDate,
+  showConferenceWebcastButton,
+  getConferenceWebcastUrl,
+  getConferenceWebcastButtonText,
+  showViewArchiveButton,
+  getViewArchiveUrl,
+  getViewArchiveButtonText,
+  showConferenceRegButton,
+  getConferenceRegUrl,
+  getConferenceRegText,
+} = useConferenceHelpers(conference);
+
+// computed properties
+const mainStyles = computed(() => {
+  if (useEventText.value) {
+    return {
+      "background-image": `url(${conference.value.photo_large})`,
+      "background-repeat": "no-repeat",
+      "background-size": "cover",
+      "background-position": "center",
+    };
+  } else {
+    return {};
+  }
+});
+
+const mutedHeaderStyle = computed(() => {
+  const muted = globalConfigValue("muted_photo_headers");
+  if (muted === "lighten") return "background-color: rgb(255, 255, 255, .4)";
+  if (muted === "darken") return "background-color: rgb(0, 0, 0, .4)";
+  return "";
+});
+
+const hasOtherButton = computed(() => {
+  return showViewArchiveButton() || showConferenceWebcastButton();
+});
+
+const mainBodyImage = computed(() => {
+  return conference.value.photo_large;
+});
+</script>
+
+<template>
+  <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"
+      :style="mutedHeaderStyle"
+    >
+      <h1
+        class="text-shadow font-bold heading-color-1 mt-4 mb-4 text-2xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl"
+      >
+        {{ conference.name }}
+      </h1>
+      <h1
+        v-if="conference.location"
+        class="text-shadow font-light heading-color-2 mb-2 text-2xl sm:text-l md:text-xl lg:text-2xl xl:text-3xl"
+      >
+        {{ conference.location }}
+      </h1>
+      <h3
+        v-if="pagesConfigValue('main.use_event_text_date')"
+        class="text-shadow font-light heading-color-2 mb-2 text-l sm:text-l md:text-xl lg:text-2xl xl:text-3xl"
+      >
+        {{ getConferenceDisplayDate() }}
+      </h3>
+
+      <div class="flex-row mt-6">
+        <!-- view test stream or webcast -->
+        <a
+          v-if="showConferenceWebcastButton()"
+          :href="getConferenceWebcastUrl()"
+          :target="/^http/.test(getConferenceWebcastUrl()) ? '_blank' : '_self'"
+        >
+          <button class="btn">
+            {{ getConferenceWebcastButtonText() }}
+          </button>
+        </a>
+
+        <!-- view archive -->
+        <a
+          v-if="showViewArchiveButton()"
+          :href="getViewArchiveUrl()"
+          :target="/^http/.test(getViewArchiveUrl()) ? '_blank' : '_self'"
+        >
+          <button class="btn">
+            {{ getViewArchiveButtonText() }}
+          </button>
+        </a>
+
+        <!-- register -->
+        <a
+          v-if="showConferenceRegButton()"
+          :href="getConferenceRegUrl()"
+          :target="/^http/.test(getConferenceRegUrl()) ? '_blank' : '_self'"
+        >
+          <button class="btn" :class="hasOtherButton ? 'md:ml-4' : ''">
+            {{ getConferenceRegText() }}
+          </button>
+        </a>
+      </div>
+    </div>
+    <img v-else :src="mainBodyImage" class="w-full h-auto" />
+  </div>
+</template>