@icvdeveloper/common-module 0.0.31 → 0.0.33

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "v3plus-common-module",
   "configKey": "v3plusCommonModule",
-  "version": "0.0.31"
+  "version": "0.0.33"
 }

package/dist/module.mjs

@@ -145,6 +145,11 @@ const module = defineNuxtModule({
       extensions: ["vue"],
       prefix: "Common"
     });
+    addComponentsDir({
+      path: join(runtimeDir, "components/support"),
+      extensions: ["vue"],
+      prefix: "Common"
+    });
     nuxt.hook("app:resolve", async (nuxt2) => {
       let index = 0;
       const piniaRuntime = nuxt2.plugins.find((object, i) => {

package/dist/runtime/components/agenda/components/PresentationLink.vue

@@ -100,7 +100,7 @@ const presentationNameClass = computed(() => {
 
           <!-- text only catchall -->
           <span v-else class="font-semibold" :class="presentationNameClass"
-            >{{ presentation.name }}!!</span
+            >{{ presentation.name }}</span
           >
 
           <!-- session details -->

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

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const expanded = ref<boolean>(false);
+
+// methods
+const toggle = () => {
+  expanded.value = !expanded.value;
+};
+</script>
+
+<template>
+  <div>
+    <div class="font-bold mt-2 mb-4">
+      <button class="outline-none hover:underline" @click="toggle">
+        <slot name="question" />
+      </button>
+
+      <button class="outline-none" @click="toggle">
+        <div
+          class="inline-block font-bold px-2 chevron"
+          :class="{ normal: !expanded, down: expanded }"
+        >
+          &gt;
+        </div>
+      </button>
+    </div>
+
+    <transition name="slide" mode="out-in">
+      <div v-show="expanded">
+        <div class="rounded px-4 pt-3 pb-1 bg-grey-lighter">
+          <slot name="answer" />
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slide-enter-active,
+.slide-leave-active {
+  overflow: hidden;
+  transition: all 0.4s ease;
+}
+.slide-enter,
+.slide-leave-to {
+  transform-origin: top;
+  transform: translateY(-10px);
+  opacity: 0;
+  height: -10px;
+}
+.chevron {
+  transition: 0.3s all cubic-bezier(1, 0.25, 0.25, 0.8);
+  will-change: transform;
+  &.down {
+    transform: rotate(90deg);
+  }
+  &.normal {
+    transform: rotate(0deg);
+  }
+}
+.outline-none {
+  outline: none;
+}
+</style>

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

@@ -0,0 +1,154 @@
+<script lang="ts" setup>
+import { ref, toRefs, computed } from "vue";
+import { cloneDeep } from "lodash-es";
+import { useNavigationConfigStore } from "../../store/navigationConfig";
+import { useTemplateConfigsStore } from "../../store/templateConfigs";
+import { useNavigation } from "../../composables/useNavigation";
+
+type AdditionalItems = {
+  [index: number]: Array<{
+    name: string;
+    url: string;
+  }>;
+};
+
+// props
+type Props = {
+  additionalItems?: AdditionalItems;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  additionalItems: () => {
+    return {};
+  },
+});
+
+const { getEnabled } = useNavigationConfigStore();
+const { globalConfigValue } = useTemplateConfigsStore();
+
+// data
+const { additionalItems } = toRefs(props);
+const navItems = getEnabled();
+const htmlHeader = globalConfigValue("html_header");
+const open = ref<boolean>(false);
+
+// methods
+const { isExternalLink, formatLink } = useNavigation();
+const toggle = () => {
+  open.value = !open.value;
+};
+
+// computed
+const combinedNavItems = computed(() => {
+  const items = cloneDeep(navItems);
+
+  if (Object.keys(additionalItems.value).length > 0) {
+    // get index to insert items at.
+    Object.keys(additionalItems.value).forEach((index) => {
+      if (items[index] !== "undefined") {
+        for (let i = 0; i < additionalItems.value[index].length; i++) {
+          items.splice(index + i, 0, additionalItems.value[index][i]);
+        }
+      }
+    });
+  }
+
+  return items;
+});
+</script>
+
+<template>
+  <div>
+    <div class="flex flex-col">
+      <header class="min-w-full flex sticky pin-t z-50">
+        <!-- Standard Screen Nav -->
+        <div
+          class="hidden flex-1 flex-col mx-auto min-w-full"
+          :class="combinedNavItems.length < 7 ? 'md:flex' : 'lg:flex'"
+        >
+          <CommonDynamicHtml
+            v-if="htmlHeader.length"
+            class="flex-initial mb-0"
+            :template="htmlHeader"
+          ></CommonDynamicHtml>
+
+          <nav class="flex flex-1 min-h-8 content-center">
+            <ul class="list-reset h-full">
+              <li v-for="(item, index) in combinedNavItems" :key="index">
+                <nuxt-link
+                  v-if="!isExternalLink(item)"
+                  :to="formatLink(item)"
+                  exact
+                  class="inline-block"
+                >
+                  {{ item.label || item.name }}
+                </nuxt-link>
+                <a
+                  v-else
+                  :href="formatLink(item)"
+                  :target="isExternalLink(item) ? '_blank' : ''"
+                >
+                  {{ item.label || item.name }}
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+
+        <!-- Mobile Nav -->
+        <div
+          class="flex flex-col content-start mx-auto min-w-full"
+          :class="combinedNavItems.length >= 7 ? 'lg:hidden' : 'md:hidden'"
+        >
+          <div class="mobile-nav flex flex-row justify-between">
+            <CommonDynamicHtml
+              v-if="htmlHeader.length"
+              class="flex-1"
+              :template="htmlHeader"
+            ></CommonDynamicHtml>
+
+            <div class="float-right p-2">
+              <button class="flex items-center px-3 py-2" @click="toggle">
+                <svg
+                  class="fill-current h-3 w-3"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>Menu</title>
+                  <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <div class="flex">
+            <nav :class="open ? 'flex' : 'hidden'" class="w-full">
+              <ul class="flex-col self-center list-reset mx-auto">
+                <li v-for="(item, index) in combinedNavItems" :key="index">
+                  <nuxt-link
+                    v-if="!isExternalLink(item)"
+                    :to="formatLink(item)"
+                    exact
+                    class="block w-full text-center"
+                    @click.native="toggle"
+                  >
+                    {{ item.label || item.name }}
+                  </nuxt-link>
+
+                  <a
+                    v-if="isExternalLink(item)"
+                    :href="formatLink(item)"
+                    target="_blank"
+                    @click.native="toggle"
+                  >
+                    {{ item.label || item.name }}
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </header>
+    </div>
+  </div>
+</template>

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

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { PropType } from "vue";
-
 type Props = {
   errors: Array<string>;
 };
@@ -12,7 +10,7 @@ const { errors } = toRefs(props);
 
 <template>
   <div>
-    <div v-if="errors" class="my-1 text-red-dark">
+    <div v-if="errors" class="my-1 text-red-500">
       <div v-for="error in errors">{{ error }}</div>
     </div>
   </div>

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

@@ -10,11 +10,11 @@ const props = withDefaults(defineProps<Props>(), {
 const { success } = toRefs(props);
 
 const errorClass = computed(() => {
-  return "bg-red-100 border border-red-400 text-red-600 font-bold px-4 py-3 mb-4 rounded relative";
+  return "message-base bg-red-100 border-red-400 text-red-600";
 });
 
 const successClass = computed(() => {
-  return "bg-green-100 border border-green-400 text-green-600 font-bold px-4 py-3 mb-4 rounded relative";
+  return "message-base bg-green-100 border-green-400 text-green-600";
 });
 </script>
 
@@ -23,3 +23,9 @@ const successClass = computed(() => {
     <slot class="pb-0" />
   </div>
 </template>
+
+<style lang="scss" scoped>
+.message-base {
+  @apply border font-bold px-4 py-3 mb-4 rounded relative;
+}
+</style>

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

@@ -1,6 +1,14 @@
 <script lang="ts" setup>
 import CloseIcon from "../../assets/svg/close-icon.svg";
 
+type Props = {
+  placeholder: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: "Search...",
+});
+
 const value = ref<string>("");
 
 const emit = defineEmits<{
@@ -15,15 +23,15 @@ const clear = () => {
 </script>
 
 <template>
-  <div class="relative">
+  <div class="flex flex-row items-center">
     <input
       v-model="value"
       type="text"
-      class="w-full pl-2 pr-5 py-3"
-      placeholder="Search..."
+      class="flex-1 pl-2 pr-5 py-1"
+      :placeholder="placeholder"
       @input="emit('onChange', value)"
     />
-    <span class="pin-r absolute mt-3 mr-5 cursor-pointer" @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/SupportForm.vue

@@ -8,6 +8,8 @@ const form = ref({
   message: "",
 });
 const submitted = ref<boolean>(false);
+
+// @todo add error handling to other form fields, or remove error fields from each field
 const errors = ref<[]>([]);
 
 const supportStore = useSupportStore();
@@ -20,9 +22,10 @@ const handleForm = () => {
       submitted.value = true;
     })
     .catch((error) => {
-      errors.value = get(error.response.data, "errors", {});
+      console.log(error.response);
+      errors.value = get(error.response._data, "errors", {});
       errors.value.response = [
-        "Error: " + get(error.response.data, "message", ""),
+        "Error: " + get(error.response._data, "message", ""),
       ];
     });
 };
@@ -77,7 +80,7 @@ const acceptNumber = () => {
           v-model="form.phone"
           placeholder="Phone"
           :required="false"
-          type="text"
+          type="tel"
           @input="acceptNumber"
         />
       </div>
@@ -89,13 +92,13 @@ const acceptNumber = () => {
 
         <CommonTextArea v-model="form.message" />
 
-        <CopmmonErrorField :errors="errors['message']" />
+        <CommonErrorField :errors="errors['message']" />
       </div>
 
+      <button class="btn btn-secondary" type="submit">Submit</button>
       <div class="mb-3">
         <CommonErrorField :errors="errors['response']" />
       </div>
-      <button class="btn btn-secondary" type="submit">Submit</button>
     </form>
 
     <!-- Submitted Message -->

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

@@ -7,6 +7,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  isEnabled: false,
   color: "#4D4D4D",
 });
 

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

@@ -22,6 +22,7 @@ const changeInput = (e) => {
     class="form-input px-2 py-1"
     :type="type"
     :value="props.modelValue"
+    :placeholder="placeholder"
     @change="changeInput"
   />
 </template>

package/dist/runtime/components/support/FAQAccordion.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { toRefs, unref } from "vue";
+
+type Props = {
+  streamTestEnabled?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  streamTestEnabled: false,
+});
+</script>
+
+<template>
+  <section>
+    <CommonAccordion v-if="props.streamTestEnabled">
+      <template #question>
+        <span class="font-bold"
+          >Q: Have you run the pre-event streaming test?</span
+        >
+      </template>
+      <template #answer>
+        <p>
+          The most important step is to visit our
+          <a href="/stream-test">Pre-Event Test Stream</a> using the computer or
+          device you will use for the live web event, and connecting with the
+          same network connection you will use for the live web event. We begin
+          webcasting a pre-event test stream one week prior to the event.
+        </p>
+        <p>
+          If you can see video, hear the sound, and see the test slide, you will
+          most likely be ready for the web event.
+        </p>
+      </template>
+    </CommonAccordion>
+  </section>
+</template>

package/dist/runtime/composables/useNavigation.mjs

@@ -9,6 +9,9 @@ export const useNavigation = () => {
     return url.startsWith("http") === true;
   };
   const formatLink = (navItem) => {
+    if (navItem.url && navItem.url.startsWith("#")) {
+      return navItem.url;
+    }
     let link = "/" + navItem.name;
     if (navItem.name === "home") {
       link = "/";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icvdeveloper/common-module",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -18,6 +18,7 @@
     "prepack": "nuxt-module-build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
+    "dev:docker": "rm -rf /tmp/nitro && nuxi dev --host 0.0.0.0 --port 3005 playground",
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
   },
   "dependencies": {