feat: enhance SingleDatePicker with color scheme support and dynamic styling

src/components/SingleDatePicker.vue

@@ -1,12 +1,46 @@
 <script setup lang="ts">
-	import { ref } from 'vue'
+	import { ref, defineProps, watch, onMounted, toRefs } from 'vue'
-	import { generateUniqueId } from '../utils'
+	import { generateUniqueId, applyColor } from '../utils'
+
+	interface SingleDatePickerProps {
+		colorScheme: {
+			mainColor: string
+			accentColor: string
+			borderColor: string
+			hoverColor: string
+			reversedColor: string
+		}
+	}
+
+	const props = defineProps({
+		colorScheme: {
+			type: Object as () => SingleDatePickerProps['colorScheme'],
+			default: () => ({
+				mainColor: '#000000',
+				accentColor: '#000000',
+				borderColor: '#e0e0e0',
+				hoverColor: '#00000017',
+				reversedColor: '#ffffff',
+			}),
+			required: false,
+		}
+	})
 
 	const selectMonth = ref(false)
 	const uniqueId = generateUniqueId()
 	const currentMonth = ref(new Date().getMonth())
 	const currentYear = ref(new Date().getFullYear())
 
+	const { colorScheme } = toRefs(props)
+
+	watch(colorScheme, newVal => {
+		applyColor(uniqueId, newVal)
+	})
+
+	onMounted(() => {
+		applyColor(uniqueId, colorScheme.value)
+	})
+
 	function goToLastMonth() {
 		if (currentMonth.value === 0) {
 			currentMonth.value = 11
@@ -28,7 +62,7 @@
 </script>
 
 <template>
-	<div :id="`__datenel_${uniqueId}`">
+	<div :id="`__datenel-${uniqueId}`">
 		<div class='datenel-component' role="dialog" aria-label="Date selection panel" v-if="!selectMonth">
 			<div className='__datenel_header'>
 				<button className='__datenel_stepper' @click="goToLastMonth()" :aria-label="`Go to last month, ${new Date(currentYear, currentMonth - 1).toLocaleString('default', { month: 'long', year: 'numeric' })}`"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>