@icvdeveloper/common-module 0.0.49 → 0.0.51

package/dist/runtime/components/auth/Ucc.vue

@@ -1,52 +1,52 @@
-<script lang="ts" setup>
-import { toRefs, onMounted } from "vue";
-import { useUcc } from "../../composables/useUcc";
-import { useConferencesStore } from "../../store/conferences";
-import { uccClassObj } from "../../@types/components";
-import { useClassBinding } from "../../composables/useClassBinding";
-
-const { loadUccScript } = useUcc();
-
-interface Props {
-  eventId?: number | null;
-  classObject?: uccClassObj;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  eventId: () => useConferencesStore().currentConference.id,
-  classObject: () => {
-    return {
-      container: ""
-    };
-  },
-});
-
-const {
-  classObject,
-} = toRefs(props);
-
-const conferenceStore = useConferencesStore();
-const { classBinding } = useClassBinding();
-
-// reactive data
-const { eventId } = toRefs(props);
-
-// on mount
-onMounted(() => {
-  loadUccScript(props.eventId);
-});
-
-</script>
-
-<template>
-  <div
-    id="uccTarget"
-    :class="
-      classBinding(
-        classObject,
-        'container',
-        'p-0 m-0 w-full'
-      )
-    "
-  />
-</template>
+<script lang="ts" setup>
+import { toRefs, onMounted } from "vue";
+import { useUcc } from "../../composables/useUcc";
+import { useConferencesStore } from "../../store/conferences";
+import { uccClassObj } from "../../@types/components";
+import { useClassBinding } from "../../composables/useClassBinding";
+
+const { loadUccScript } = useUcc();
+
+interface Props {
+  eventId?: number | null;
+  classObject?: uccClassObj;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  eventId: () => useConferencesStore().currentConference.id,
+  classObject: () => {
+    return {
+      container: ""
+    };
+  },
+});
+
+const {
+  classObject,
+} = toRefs(props);
+
+const conferenceStore = useConferencesStore();
+const { classBinding } = useClassBinding();
+
+// reactive data
+const { eventId } = toRefs(props);
+
+// on mount
+onMounted(() => {
+  loadUccScript(props.eventId);
+});
+
+</script>
+
+<template>
+  <div
+    id="uccTarget"
+    :class="
+      classBinding(
+        classObject,
+        'container',
+        'p-0 m-0 w-full'
+      )
+    "
+  />
+</template>

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

@@ -1,41 +1,99 @@
-<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>
-
+<script lang="ts" setup>
+import { ref, toRefs } from "vue";
+import { useClassBinding } from "../../composables/useClassBinding";
+import {
+  accordionClassObj,
+  accordionCompObj,
+  svgIconClassObj,
+} from "../../@types/components";
+
+interface Props {
+  classObject?: accordionClassObj;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      components: ref<accordionCompObj>({
+        svgIcon: ref<svgIconClassObj>({}),
+      }),
+    };
+  },
+});
+
+const { classObject } = toRefs(props);
+
+const { classBinding } = useClassBinding();
+const expanded = ref<boolean>(false);
+
+// methods
+const toggle = () => {
+  expanded.value = !expanded.value;
+};
+</script>
+
+<template>
+  <div>
+    <div
+      :class="
+        classBinding(classObject, 'buttonContainer', 'font-bold mt-2 mb-4')
+      "
+    >
+      <button
+        :class="
+          classBinding(
+            classObject,
+            'textButton',
+            'outline-none hover:underline'
+          )
+        "
+        @click="toggle"
+      >
+        <slot name="question" />
+      </button>
+
+      <button
+        :class="classBinding(classObject, 'iconButton', 'outline-none')"
+        @click="toggle"
+      >
+        <div
+          :class="[
+            { normal: !expanded, down: expanded },
+            classBinding(
+              classObject,
+              'iconContainer',
+              'inline-block font-bold px-2 chevron'
+            ),
+          ]"
+        >
+          <CommonSvgIcon
+            :class="
+              classBinding(classObject.components.svgIcon, 'container', '')
+            "
+            :class-object="classObject.components.svgIcon"
+            icon="chevron"
+          />
+        </div>
+      </button>
+    </div>
+
+    <transition name="slide" mode="out-in">
+      <div
+        v-show="expanded"
+        :class="
+          classBinding(
+            classObject,
+            'dropdownContainer',
+            'rounded px-4 pt-3 pb-1 bg-grey-lighter'
+          )
+        "
+      >
+        <slot name="answer" />
+      </div>
+    </transition>
+  </div>
+</template>
+
 <style scoped>
 .slide-enter-active,
 .slide-leave-active {
@@ -56,7 +114,7 @@ const toggle = () => {
   will-change: transform;
 }
 .chevron.down {
-  transform: rotate(90deg);
+  transform: rotate(180deg);
 }
 .chevron.normal {
   transform: rotate(0deg);
@@ -65,4 +123,4 @@ const toggle = () => {
 .outline-none {
   outline: none;
 }
-</style>
+</style>