updated daisyUI package.

app/package.json

@@ -17,7 +17,7 @@
     "axios": "^0.21.1",
     "core-js": "^3.24.1",
     "crypto-js": "^3.1.9-1",
-    "daisyui": "^2.51.6",
+    "daisyui": "^3.1.6",
     "fs-extra": "^11.1.1",
     "material-design-icons": "^3.0.1",
     "pinia": "^2.1.3",

app/src/views/FormKitCustomComposition.vue

 <script setup>
-// Formkit with composition API
+	// Formkit with composition API
 
-import { ref } from "vue";
-import { createInput } from "@formkit/vue";
-import Multiselect from "@/components/multiselect.vue";
-import dateRangePickr from "@/components/date-range-pickr.vue";
+	import { ref } from "vue"
+	import { createInput } from "@formkit/vue"
+	import Multiselect from "@/components/multiselect.vue"
+	import dateRangePickr from "@/components/date-range-pickr.vue"
 
-const multiselect = createInput(Multiselect);
-const dateRangePickrC = createInput(dateRangePickr);
-const values = ref({});
+	const multiselect = createInput(Multiselect)
+	const dateRangePickrC = createInput(dateRangePickr)
+	const values = ref({})
 </script>
 <template>
-  <div id="masterAxios" class="box-wrapper">
-    <h2 class="mb-8 flex flex-row items-center text-xl font-semibold">
-      <i class="isax isax-bold-arrow-left-2 me-2" @click="$router.go(-1)"></i>
-      Dashboard
-    </h2>
-    <div class="mx-auto w-1/2">
-      <div class="card p-8">
-        <FormKit type="form" v-model="values">
-          <FormKit
-            :type="multiselect"
-            label="Multiple Data Select"
-            validation="required"
-            validation-visibility="live"
-			:wrapper-class="{ $reset: true, 'w-full': true }"
-            outer-class="$reset mx-auto"
-          ></FormKit>
-          <FormKit
-            :type="dateRangePickrC"
-            label="Date Range Select"
-            validation="required"
-            validation-visibility="live"
-			:wrapper-class="{ $reset: true, 'w-full': true }"
-            outer-class="$reset my-4"
-          ></FormKit>
-          <div class="my-4">
-			{{ values }}
-		  </div>
-        </FormKit>
-      </div>
-    </div>
-  </div>
+	<div id="masterAxios" class="box-wrapper">
+		<h2 class="mb-8 flex flex-row items-center text-xl font-semibold">
+			<i class="isax isax-bold-arrow-left-2 me-2" @click="$router.go(-1)"></i>
+			Dashboard
+		</h2>
+		<div class="mx-auto w-1/2">
+			<div class="card p-8">
+				<FormKit type="form" v-model="values">
+					<FormKit
+						:type="multiselect"
+						label="Multiple Data Select"
+						validation="required"
+						validation-visibility="live"
+						:wrapper-class="{ $reset: true, 'w-full': true }"
+						outer-class="$reset mx-auto"
+					></FormKit>
+					<FormKit
+						:type="dateRangePickrC"
+						label="Date Range Select"
+						validation="required"
+						validation-visibility="live"
+						:wrapper-class="{ $reset: true, 'w-full': true }"
+						outer-class="$reset my-4"
+					></FormKit>
+					<div class="my-4">
+						{{ values }}
+					</div>
+				</FormKit>
+			</div>
+			<div class="card p-8">
+				<div class="collapse collapse-arrow bg-base-200">
+					<input type="radio" name="my-accordion-2" checked="checked" />
+					<div class="collapse-title text-xl font-medium">Click to open this one and close others</div>
+					<div class="collapse-content">
+						<p>hello</p>
+					</div>
+				</div>
+				<div class="collapse collapse-arrow bg-base-200 my-2">
+					<input type="radio" name="my-accordion-2" />
+					<div class="collapse-title text-xl font-medium">Click to open this one and close others</div>
+					<div class="collapse-content">
+						<p>hello</p>
+					</div>
+				</div>
+				<div class="collapse collapse-arrow bg-base-200">
+					<input type="radio" name="my-accordion-2" />
+					<div class="collapse-title text-xl font-medium">Click to open this one and close others</div>
+					<div class="collapse-content">
+						<p>hello</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>