@icvdeveloper/common-module 0.0.76 → 0.0.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (106) hide show
  1. package/README.md +6 -6
  2. package/dist/module.json +1 -1
  3. package/dist/module.mjs +5 -0
  4. package/dist/runtime/@types/components.d.ts +89 -1
  5. package/dist/runtime/assets/svg/answer.svg +14 -14
  6. package/dist/runtime/assets/svg/avatar.svg +1 -1
  7. package/dist/runtime/assets/svg/bell-icon.svg +3 -3
  8. package/dist/runtime/assets/svg/checkmark-icon.svg +1 -1
  9. package/dist/runtime/assets/svg/close-icon.svg +1 -1
  10. package/dist/runtime/assets/svg/icon-avatar.svg +1 -1
  11. package/dist/runtime/assets/svg/icon-chevron.svg +4 -4
  12. package/dist/runtime/assets/svg/icon-circle-plus.svg +1 -1
  13. package/dist/runtime/assets/svg/icon-close.svg +1 -1
  14. package/dist/runtime/assets/svg/icon-info.svg +2 -2
  15. package/dist/runtime/assets/svg/icon-new-window.svg +11 -11
  16. package/dist/runtime/assets/svg/icon-offline.svg +3 -3
  17. package/dist/runtime/assets/svg/icon-online.svg +3 -3
  18. package/dist/runtime/assets/svg/icon-person.svg +2 -2
  19. package/dist/runtime/assets/svg/icon-play.svg +2 -2
  20. package/dist/runtime/assets/svg/icon-star-filled.svg +29 -29
  21. package/dist/runtime/assets/svg/icon-star.svg +24 -24
  22. package/dist/runtime/assets/svg/icon-video-chat.svg +14 -14
  23. package/dist/runtime/assets/svg/icon-website.svg +2 -2
  24. package/dist/runtime/assets/svg/icon-zoom.svg +10 -10
  25. package/dist/runtime/assets/svg/notification-icon.svg +32 -32
  26. package/dist/runtime/assets/svg/offline-icon.svg +1 -1
  27. package/dist/runtime/assets/svg/online-icon.svg +3 -3
  28. package/dist/runtime/assets/svg/peer2peer.svg +3 -3
  29. package/dist/runtime/assets/svg/phone.svg +1 -1
  30. package/dist/runtime/assets/svg/plus-icon.svg +1 -1
  31. package/dist/runtime/assets/svg/red-icon.svg +3 -3
  32. package/dist/runtime/assets/svg/reject.svg +14 -14
  33. package/dist/runtime/assets/svg/search-icon.svg +3 -3
  34. package/dist/runtime/components/affiliates/AffiliatePage.vue +17 -17
  35. package/dist/runtime/components/agenda/AgendaList.vue +234 -112
  36. package/dist/runtime/components/agenda/AgendaTabbed.vue +309 -309
  37. package/dist/runtime/components/agenda/components/AgendaListAccordion.vue +53 -26
  38. package/dist/runtime/components/agenda/components/Calendar.vue +89 -89
  39. package/dist/runtime/components/agenda/components/InfoLink.vue +56 -56
  40. package/dist/runtime/components/agenda/components/PlayIcon.vue +49 -49
  41. package/dist/runtime/components/agenda/components/PresentationLink.vue +137 -137
  42. package/dist/runtime/components/agenda/components/Sponsor.vue +132 -132
  43. package/dist/runtime/components/auth/LoginFullWidth.vue +78 -78
  44. package/dist/runtime/components/auth/PasswordReset.vue +60 -60
  45. package/dist/runtime/components/auth/Registration.vue +27 -27
  46. package/dist/runtime/components/auth/Ucc.vue +52 -52
  47. package/dist/runtime/components/core/Accordion.vue +97 -97
  48. package/dist/runtime/components/core/CountdownTimer.vue +308 -308
  49. package/dist/runtime/components/core/DynamicHtml.vue +1 -1
  50. package/dist/runtime/components/core/Modal.vue +111 -111
  51. package/dist/runtime/components/core/Navbar.vue +154 -154
  52. package/dist/runtime/components/core/SvgIcon.vue +151 -151
  53. package/dist/runtime/components/core/ZoomModal.vue +37 -37
  54. package/dist/runtime/components/events/EventHeader.vue +133 -133
  55. package/dist/runtime/components/events/ListEvents.vue +521 -521
  56. package/dist/runtime/components/forms/AlertBox.vue +21 -21
  57. package/dist/runtime/components/forms/ErrorField.vue +17 -17
  58. package/dist/runtime/components/forms/Message.vue +27 -27
  59. package/dist/runtime/components/forms/SearchInput.vue +38 -38
  60. package/dist/runtime/components/forms/SupportForm.vue +112 -112
  61. package/dist/runtime/components/forms/SwitchInput.vue +42 -42
  62. package/dist/runtime/components/forms/TextArea.vue +26 -26
  63. package/dist/runtime/components/forms/TextInput.vue +28 -28
  64. package/dist/runtime/components/layouts/Accordion.vue +78 -78
  65. package/dist/runtime/components/media/PlayerAndContentContainer.vue +170 -0
  66. package/dist/runtime/components/media/WebcastVideoPlayer.vue +167 -0
  67. package/dist/runtime/components/media/components/AgendaPanel.vue +53 -0
  68. package/dist/runtime/components/media/components/CeCreditNotification.vue +99 -0
  69. package/dist/runtime/components/media/components/CeCreditNotification.vue.d.ts +28 -0
  70. package/dist/runtime/components/media/components/ContentAccordion.vue +65 -0
  71. package/dist/runtime/components/media/components/ContentAccordion.vue.d.ts +29 -0
  72. package/dist/runtime/components/media/components/ContentArea.vue +175 -0
  73. package/dist/runtime/components/media/components/ContentTabs.vue +263 -0
  74. package/dist/runtime/components/media/components/DocumentsPanel.vue +52 -0
  75. package/dist/runtime/components/media/components/DocumentsPanel.vue.d.ts +7 -0
  76. package/dist/runtime/components/media/components/JsonApi.vue +33 -0
  77. package/dist/runtime/components/media/components/JsonApi.vue.d.ts +16 -0
  78. package/dist/runtime/components/media/components/MediaContainer.vue +104 -0
  79. package/dist/runtime/components/media/components/OverviewPanel.vue +51 -0
  80. package/dist/runtime/components/media/components/PresentersPanel.vue +65 -0
  81. package/dist/runtime/components/media/components/PresentersPanel.vue.d.ts +32 -0
  82. package/dist/runtime/components/media/components/SessionReporting.vue +96 -0
  83. package/dist/runtime/components/media/components/SessionReporting.vue.d.ts +35 -0
  84. package/dist/runtime/components/media/components/SponsorsPanel.vue +85 -0
  85. package/dist/runtime/components/media/components/SponsorsPanel.vue.d.ts +27 -0
  86. package/dist/runtime/components/media/components/WindowContent.vue +118 -0
  87. package/dist/runtime/components/media/components/WindowContent.vue.d.ts +50 -0
  88. package/dist/runtime/components/media/components/WindowSlide.vue +92 -0
  89. package/dist/runtime/components/media/components/WindowSlide.vue.d.ts +36 -0
  90. package/dist/runtime/components/presenters/PresenterListing.vue +164 -164
  91. package/dist/runtime/components/presenters/PresenterModal.vue +223 -223
  92. package/dist/runtime/components/profile/Profile.vue +149 -149
  93. package/dist/runtime/components/profile/components/Sidebar.vue +27 -27
  94. package/dist/runtime/components/profile/components/SidebarNavItem.vue +39 -39
  95. package/dist/runtime/components/profile/tabs/Favorites.vue +21 -21
  96. package/dist/runtime/components/profile/tabs/GeneralInformation.vue +122 -122
  97. package/dist/runtime/components/profile/tabs/ProfileImage.vue +75 -75
  98. package/dist/runtime/components/support/FAQAccordion.vue +140 -140
  99. package/dist/runtime/composables/useStream.d.ts +15 -0
  100. package/dist/runtime/composables/useStream.mjs +89 -0
  101. package/dist/runtime/enums/general.d.ts +7 -0
  102. package/dist/runtime/enums/general.mjs +8 -0
  103. package/dist/runtime/models/conference.d.ts +17 -0
  104. package/dist/runtime/store/presentations.d.ts +11 -0
  105. package/dist/runtime/store/presentations.mjs +10 -0
  106. package/package.json +1 -1
@@ -1,78 +1,78 @@
1
- <script lang="ts" setup>
2
- import { toRefs } from "vue";
3
- import { storeToRefs } from "pinia";
4
- import { Conference } from "../../models/conference";
5
- import { useLogin } from "../../composables/useLogin";
6
- import { useTemplateConfigsStore } from "../../store";
7
-
8
- interface Props {
9
- conference?: Conference | null;
10
- }
11
-
12
- const props = withDefaults(defineProps<Props>(), {
13
- conference: null,
14
- });
15
-
16
- const { conference } = toRefs<Props>(props);
17
-
18
- const { globalConfigValue } = storeToRefs(useTemplateConfigsStore());
19
-
20
- // Methods
21
- const { loginError, handleLogin, email, password, tooManySessions, showReset } =
22
- useLogin(conference);
23
- </script>
24
-
25
- <template>
26
- <div class="px-2">
27
- <div class="flex flex-1 flex-col text-center pt-8">
28
- <h1 class="mb-3 heading-color-3">Log In</h1>
29
- <CommonMessage
30
- v-if="loginError"
31
- :success="false"
32
- class="w-full max-w-xs mx-auto"
33
- >
34
- Invalid email or password.
35
- <br />
36
- <a
37
- v-if="!globalConfigValue('secure_site_access_enabled', false)"
38
- href="/login/email"
39
- >Forgot Your Password?</a
40
- >
41
- <a
42
- v-if="globalConfigValue('secure_site_access_enabled', false)"
43
- class="cursor-pointer"
44
- @click="showReset"
45
- >Forgot Your Password?</a
46
- >
47
- </CommonMessage>
48
-
49
- <div class="max-w-xs mx-auto" @keyup.enter="handleLogin()">
50
- <input
51
- v-model="email"
52
- type="email"
53
- placeholder="Email"
54
- class="form-input contrast-border mb-2"
55
- />
56
- <input
57
- v-model="password"
58
- type="password"
59
- placeholder="password"
60
- class="form-input contrast-border mb-5"
61
- />
62
- <button v-if="!tooManySessions" class="btn" @click="handleLogin()">
63
- Log In
64
- </button>
65
- <CommonMessage
66
- v-if="tooManySessions"
67
- :success="false"
68
- class="w-full max-w-xs mx-auto"
69
- >
70
- This user access is logged in on another device!
71
- </CommonMessage>
72
- <button v-if="tooManySessions" class="btn" @click="handleLogin(true)">
73
- Sign out other Device
74
- </button>
75
- </div>
76
- </div>
77
- </div>
78
- </template>
1
+ <script lang="ts" setup>
2
+ import { toRefs } from "vue";
3
+ import { storeToRefs } from "pinia";
4
+ import { Conference } from "../../models/conference";
5
+ import { useLogin } from "../../composables/useLogin";
6
+ import { useTemplateConfigsStore } from "../../store";
7
+
8
+ interface Props {
9
+ conference?: Conference | null;
10
+ }
11
+
12
+ const props = withDefaults(defineProps<Props>(), {
13
+ conference: null,
14
+ });
15
+
16
+ const { conference } = toRefs<Props>(props);
17
+
18
+ const { globalConfigValue } = storeToRefs(useTemplateConfigsStore());
19
+
20
+ // Methods
21
+ const { loginError, handleLogin, email, password, tooManySessions, showReset } =
22
+ useLogin(conference);
23
+ </script>
24
+
25
+ <template>
26
+ <div class="px-2">
27
+ <div class="flex flex-1 flex-col text-center pt-8">
28
+ <h1 class="mb-3 heading-color-3">Log In</h1>
29
+ <CommonMessage
30
+ v-if="loginError"
31
+ :success="false"
32
+ class="w-full max-w-xs mx-auto"
33
+ >
34
+ Invalid email or password.
35
+ <br />
36
+ <a
37
+ v-if="!globalConfigValue('secure_site_access_enabled', false)"
38
+ href="/login/email"
39
+ >Forgot Your Password?</a
40
+ >
41
+ <a
42
+ v-if="globalConfigValue('secure_site_access_enabled', false)"
43
+ class="cursor-pointer"
44
+ @click="showReset"
45
+ >Forgot Your Password?</a
46
+ >
47
+ </CommonMessage>
48
+
49
+ <div class="max-w-xs mx-auto" @keyup.enter="handleLogin()">
50
+ <input
51
+ v-model="email"
52
+ type="email"
53
+ placeholder="Email"
54
+ class="form-input contrast-border mb-2"
55
+ />
56
+ <input
57
+ v-model="password"
58
+ type="password"
59
+ placeholder="password"
60
+ class="form-input contrast-border mb-5"
61
+ />
62
+ <button v-if="!tooManySessions" class="btn" @click="handleLogin()">
63
+ Log In
64
+ </button>
65
+ <CommonMessage
66
+ v-if="tooManySessions"
67
+ :success="false"
68
+ class="w-full max-w-xs mx-auto"
69
+ >
70
+ This user access is logged in on another device!
71
+ </CommonMessage>
72
+ <button v-if="tooManySessions" class="btn" @click="handleLogin(true)">
73
+ Sign out other Device
74
+ </button>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </template>
@@ -1,60 +1,60 @@
1
- <script lang="ts" setup>
2
- import { ref, toRefs } from "vue";
3
- import { useAuthStore } from "../../store/auth";
4
-
5
- interface Props {
6
- isCentered?: boolean;
7
- }
8
-
9
- const props = withDefaults(defineProps<Props>(), {
10
- isCentered: false,
11
- });
12
-
13
- // data
14
- const { isCentered } = toRefs(props);
15
- const loading = ref<boolean>(false);
16
- const email = ref<string>("");
17
- const message = ref<null | string>(null);
18
- const errors = ref<Array<any>>([]);
19
-
20
- // methods
21
- const { passwordReset } = useAuthStore();
22
- const submitPasswordReset = () => {
23
- loading.value = true;
24
- message.value = null;
25
- errors.value = [];
26
- passwordReset(email.value)
27
- .then((response) => {
28
- message.value = response.data.message;
29
- })
30
- .catch((error) => {
31
- if (error.response.status === 422) {
32
- errors.value = error.response.data.errors;
33
- } else {
34
- errors.value = ["Error requesting password reset."];
35
- }
36
- })
37
- .finally(() => {
38
- loading.value = false;
39
- });
40
- };
41
- </script>
42
-
43
- <template>
44
- <div :class="isCentered ? 'w-full max-w-xs mx-auto' : ''">
45
- <div class="mb-4">Enter your email address to reset your password.</div>
46
- <CommonMessage v-if="message" :success="true">
47
- {{ message }}
48
- </CommonMessage>
49
- <CommonMessage v-if="errors.length > 0" :success="false">
50
- {{ errors[0] }}
51
- </CommonMessage>
52
- <div @keyup.enter="submitPasswordReset()">
53
- <CommonTextInput v-model="email" placeholder="Email" type="email" />
54
- <button class="btn my-2" @click="submitPasswordReset()">
55
- <span v-if="loading">Processing...</span>
56
- <span v-else>Send Password Reset Link</span>
57
- </button>
58
- </div>
59
- </div>
60
- </template>
1
+ <script lang="ts" setup>
2
+ import { ref, toRefs } from "vue";
3
+ import { useAuthStore } from "../../store/auth";
4
+
5
+ interface Props {
6
+ isCentered?: boolean;
7
+ }
8
+
9
+ const props = withDefaults(defineProps<Props>(), {
10
+ isCentered: false,
11
+ });
12
+
13
+ // data
14
+ const { isCentered } = toRefs(props);
15
+ const loading = ref<boolean>(false);
16
+ const email = ref<string>("");
17
+ const message = ref<null | string>(null);
18
+ const errors = ref<Array<any>>([]);
19
+
20
+ // methods
21
+ const { passwordReset } = useAuthStore();
22
+ const submitPasswordReset = () => {
23
+ loading.value = true;
24
+ message.value = null;
25
+ errors.value = [];
26
+ passwordReset(email.value)
27
+ .then((response) => {
28
+ message.value = response.data.message;
29
+ })
30
+ .catch((error) => {
31
+ if (error.response.status === 422) {
32
+ errors.value = error.response.data.errors;
33
+ } else {
34
+ errors.value = ["Error requesting password reset."];
35
+ }
36
+ })
37
+ .finally(() => {
38
+ loading.value = false;
39
+ });
40
+ };
41
+ </script>
42
+
43
+ <template>
44
+ <div :class="isCentered ? 'w-full max-w-xs mx-auto' : ''">
45
+ <div class="mb-4">Enter your email address to reset your password.</div>
46
+ <CommonMessage v-if="message" :success="true">
47
+ {{ message }}
48
+ </CommonMessage>
49
+ <CommonMessage v-if="errors.length > 0" :success="false">
50
+ {{ errors[0] }}
51
+ </CommonMessage>
52
+ <div @keyup.enter="submitPasswordReset()">
53
+ <CommonTextInput v-model="email" placeholder="Email" type="email" />
54
+ <button class="btn my-2" @click="submitPasswordReset()">
55
+ <span v-if="loading">Processing...</span>
56
+ <span v-else>Send Password Reset Link</span>
57
+ </button>
58
+ </div>
59
+ </div>
60
+ </template>
@@ -1,27 +1,27 @@
1
- <script lang="ts" setup>
2
- import { storeToRefs } from "pinia";
3
- import { useAuthStore } from "../../store/auth";
4
- import { useRegistration } from "../../composables/useRegistration";
5
-
6
- // data
7
- const { isLoggedIn } = storeToRefs(useAuthStore());
8
-
9
- // methods
10
- const { isTownhallRegistration } = useRegistration();
11
- const submitRegistration = () => {};
12
- </script>
13
-
14
- <template>
15
- <div v-if="isLoggedIn">
16
- <CommonMessage :success="false">Already logged in.</CommonMessage>
17
- </div>
18
- <div v-else class="px-2">
19
- <div class="flex flex-1 flex-col text-center pt-8">
20
- <h1 class="mb-3 heading-color-3">Log In</h1>
21
-
22
- <div class="w-full max-w-xs mx-auto pb-12">
23
- <form class="w-full" @submit.prevent="submitRegistration"></form>
24
- </div>
25
- </div>
26
- </div>
27
- </template>
1
+ <script lang="ts" setup>
2
+ import { storeToRefs } from "pinia";
3
+ import { useAuthStore } from "../../store/auth";
4
+ import { useRegistration } from "../../composables/useRegistration";
5
+
6
+ // data
7
+ const { isLoggedIn } = storeToRefs(useAuthStore());
8
+
9
+ // methods
10
+ const { isTownhallRegistration } = useRegistration();
11
+ const submitRegistration = () => {};
12
+ </script>
13
+
14
+ <template>
15
+ <div v-if="isLoggedIn">
16
+ <CommonMessage :success="false">Already logged in.</CommonMessage>
17
+ </div>
18
+ <div v-else class="px-2">
19
+ <div class="flex flex-1 flex-col text-center pt-8">
20
+ <h1 class="mb-3 heading-color-3">Log In</h1>
21
+
22
+ <div class="w-full max-w-xs mx-auto pb-12">
23
+ <form class="w-full" @submit.prevent="submitRegistration"></form>
24
+ </div>
25
+ </div>
26
+ </div>
27
+ </template>
@@ -1,52 +1,52 @@
1
- <script lang="ts" setup>
2
- import { toRefs, onMounted } from "vue";
3
- import { useUcc } from "../../composables/useUcc";
4
- import { useConferencesStore } from "../../store/conferences";
5
- import { uccClassObj } from "../../@types/components";
6
- import { useClassBinding } from "../../composables/useClassBinding";
7
-
8
- const { loadUccScript } = useUcc();
9
-
10
- interface Props {
11
- eventId: number;
12
- classObject?: uccClassObj;
13
- }
14
-
15
- const props = withDefaults(defineProps<Props>(), {
16
- eventId: () => useConferencesStore().currentConference.id,
17
- classObject: () => {
18
- return {
19
- container: ""
20
- };
21
- },
22
- });
23
-
24
- const {
25
- classObject,
26
- } = toRefs(props);
27
-
28
- const conferenceStore = useConferencesStore();
29
- const { classBinding } = useClassBinding();
30
-
31
- // reactive data
32
- const { eventId } = toRefs(props);
33
-
34
- // on mount
35
- onMounted(() => {
36
- loadUccScript(props.eventId);
37
- });
38
-
39
- </script>
40
-
41
- <template>
42
- <div
43
- id="uccTarget"
44
- :class="
45
- classBinding(
46
- classObject,
47
- 'container',
48
- 'p-0 m-0 w-full'
49
- )
50
- "
51
- />
52
- </template>
1
+ <script lang="ts" setup>
2
+ import { toRefs, onMounted } from "vue";
3
+ import { useUcc } from "../../composables/useUcc";
4
+ import { useConferencesStore } from "../../store/conferences";
5
+ import { uccClassObj } from "../../@types/components";
6
+ import { useClassBinding } from "../../composables/useClassBinding";
7
+
8
+ const { loadUccScript } = useUcc();
9
+
10
+ interface Props {
11
+ eventId: number;
12
+ classObject?: uccClassObj;
13
+ }
14
+
15
+ const props = withDefaults(defineProps<Props>(), {
16
+ eventId: () => useConferencesStore().currentConference.id,
17
+ classObject: () => {
18
+ return {
19
+ container: ""
20
+ };
21
+ },
22
+ });
23
+
24
+ const {
25
+ classObject,
26
+ } = toRefs(props);
27
+
28
+ const conferenceStore = useConferencesStore();
29
+ const { classBinding } = useClassBinding();
30
+
31
+ // reactive data
32
+ const { eventId } = toRefs(props);
33
+
34
+ // on mount
35
+ onMounted(() => {
36
+ loadUccScript(props.eventId);
37
+ });
38
+
39
+ </script>
40
+
41
+ <template>
42
+ <div
43
+ id="uccTarget"
44
+ :class="
45
+ classBinding(
46
+ classObject,
47
+ 'container',
48
+ 'p-0 m-0 w-full'
49
+ )
50
+ "
51
+ />
52
+ </template>
@@ -1,99 +1,99 @@
1
- <script lang="ts" setup>
2
- import { ref, toRefs } from "vue";
3
- import { useClassBinding } from "../../composables/useClassBinding";
4
- import {
5
- accordionClassObj,
6
- accordionCompObj,
7
- svgIconClassObj,
8
- } from "../../@types/components";
9
-
10
- interface Props {
11
- classObject?: accordionClassObj;
12
- }
13
-
14
- const props = withDefaults(defineProps<Props>(), {
15
- classObject: () => {
16
- return {
17
- components: ref<accordionCompObj>({
18
- svgIcon: ref<svgIconClassObj>({}),
19
- }),
20
- };
21
- },
22
- });
23
-
24
- const { classObject } = toRefs(props);
25
-
26
- const { classBinding } = useClassBinding();
27
- const expanded = ref<boolean>(false);
28
-
29
- // methods
30
- const toggle = () => {
31
- expanded.value = !expanded.value;
32
- };
33
- </script>
34
-
35
- <template>
36
- <div>
37
- <div
38
- :class="
39
- classBinding(classObject, 'buttonContainer', 'font-bold mt-2 mb-4')
40
- "
41
- >
42
- <button
43
- :class="
44
- classBinding(
45
- classObject,
46
- 'textButton',
47
- 'outline-none hover:underline'
48
- )
49
- "
50
- @click="toggle"
51
- >
52
- <slot name="question" />
53
- </button>
54
-
55
- <button
56
- :class="classBinding(classObject, 'iconButton', 'outline-none')"
57
- @click="toggle"
58
- >
59
- <div
60
- :class="[
61
- { normal: !expanded, down: expanded },
62
- classBinding(
63
- classObject,
64
- 'iconContainer',
65
- 'inline-block font-bold px-2 chevron'
66
- ),
67
- ]"
68
- >
69
- <CommonSvgIcon
70
- :class="
71
- classBinding(classObject.components.svgIcon, 'container', '')
72
- "
73
- :class-object="classObject.components.svgIcon"
74
- icon="chevron"
75
- />
76
- </div>
77
- </button>
78
- </div>
79
-
80
- <transition name="slide" mode="out-in">
81
- <div
82
- v-show="expanded"
83
- :class="
84
- classBinding(
85
- classObject,
86
- 'dropdownContainer',
87
- 'rounded px-4 pt-3 pb-1 bg-grey-lighter'
88
- )
89
- "
90
- >
91
- <slot name="answer" />
92
- </div>
93
- </transition>
94
- </div>
95
- </template>
96
-
1
+ <script lang="ts" setup>
2
+ import { ref, toRefs } from "vue";
3
+ import { useClassBinding } from "../../composables/useClassBinding";
4
+ import {
5
+ accordionClassObj,
6
+ accordionCompObj,
7
+ svgIconClassObj,
8
+ } from "../../@types/components";
9
+
10
+ interface Props {
11
+ classObject?: accordionClassObj;
12
+ }
13
+
14
+ const props = withDefaults(defineProps<Props>(), {
15
+ classObject: () => {
16
+ return {
17
+ components: ref<accordionCompObj>({
18
+ svgIcon: ref<svgIconClassObj>({}),
19
+ }),
20
+ };
21
+ },
22
+ });
23
+
24
+ const { classObject } = toRefs(props);
25
+
26
+ const { classBinding } = useClassBinding();
27
+ const expanded = ref<boolean>(false);
28
+
29
+ // methods
30
+ const toggle = () => {
31
+ expanded.value = !expanded.value;
32
+ };
33
+ </script>
34
+
35
+ <template>
36
+ <div>
37
+ <div
38
+ :class="
39
+ classBinding(classObject, 'buttonContainer', 'font-bold mt-2 mb-4')
40
+ "
41
+ >
42
+ <button
43
+ :class="
44
+ classBinding(
45
+ classObject,
46
+ 'textButton',
47
+ 'outline-none hover:underline'
48
+ )
49
+ "
50
+ @click="toggle"
51
+ >
52
+ <slot name="question" />
53
+ </button>
54
+
55
+ <button
56
+ :class="classBinding(classObject, 'iconButton', 'outline-none')"
57
+ @click="toggle"
58
+ >
59
+ <div
60
+ :class="[
61
+ { normal: !expanded, down: expanded },
62
+ classBinding(
63
+ classObject,
64
+ 'iconContainer',
65
+ 'inline-block font-bold px-2 chevron'
66
+ ),
67
+ ]"
68
+ >
69
+ <CommonSvgIcon
70
+ :class="
71
+ classBinding(classObject.components.svgIcon, 'container', '')
72
+ "
73
+ :class-object="classObject.components.svgIcon"
74
+ icon="chevron"
75
+ />
76
+ </div>
77
+ </button>
78
+ </div>
79
+
80
+ <transition name="slide" mode="out-in">
81
+ <div
82
+ v-show="expanded"
83
+ :class="
84
+ classBinding(
85
+ classObject,
86
+ 'dropdownContainer',
87
+ 'rounded px-4 pt-3 pb-1 bg-grey-lighter'
88
+ )
89
+ "
90
+ >
91
+ <slot name="answer" />
92
+ </div>
93
+ </transition>
94
+ </div>
95
+ </template>
96
+
97
97
  <style scoped>
98
98
  .slide-enter-active,
99
99
  .slide-leave-active {
@@ -123,4 +123,4 @@ const toggle = () => {
123
123
  .outline-none {
124
124
  outline: none;
125
125
  }
126
- </style>
126
+ </style>