feat: collapse vue component

Author: vis97c

packages/common-enums/src/components.ts

@@ -46,4 +46,5 @@ export const componentNames = [
 	"Dropdown",
 	"Table",
 	"Slider",
+	"Collapse",
 ] as const;

packages/components-vue/src/components/Collapse.vue

@@ -0,0 +1,46 @@
+<template>
+	<nav class="list">
+		<BaseInput v-if="title" v-slot="{ id }" type="checkbox" :checked="checked" :theme="theme">
+			<label :for="id" class="toggle--list" :class="`--txtColor-${themeValues[0]}`">
+				<span>{{ title }}</span>
+				<IconFa name="angle-down" size="20" />
+			</label>
+		</BaseInput>
+		<component :is="el || 'ul'" class="list-group">
+			<slot></slot>
+		</component>
+	</nav>
+</template>
+<script setup lang="ts">
+	import {
+		type Component as VueComponent,
+		type DefineComponent,
+		type FunctionalComponent,
+	} from "vue";
+
+	import BaseInput from "./base/Input.vue";
+	import IconFa from "./icon/Fa.vue";
+
+	import type { iUseThemeProps } from "../types/props";
+	import useTheme from "../composables/theme";
+
+	interface Collapse extends iUseThemeProps {
+		title?: string;
+		checked?: boolean;
+		el?: VueComponent | FunctionalComponent | DefineComponent | string;
+	}
+
+	/**
+	 * Collapse component
+	 *
+	 * Collapses contents leaving only the given title behind
+	 *
+	 * @component
+	 */
+
+	defineOptions({ name: "CollapseSimple", inheritAttrs: false });
+
+	const props = defineProps<Collapse>();
+
+	const { themeValues } = useTheme(props);
+</script>

packages/components-vue/src/index.ts

@@ -52,6 +52,7 @@ export { default as Modal } from "./components/Modal.vue";
 export { default as Dropdown } from "./components/Dropdown.vue";
 export { default as Table } from "./components/Table.vue";
 export { default as Slider } from "./components/Slider.vue";
+export { default as Collapse } from "./components/Collapse.vue";
 
 // composables
 export { default as useTheme } from "./composables/theme";