feat: onchange, fix: button

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ulleritech/nepali-date-picker",
-	"version": "2.0.6",
+	"version": "2.1.0",
 	"description": "Nepali Date Picker",
 	"author": {
 		"name": "Ulleri Tech",
@@ -70,4 +70,4 @@
 	"dependencies": {
 		"nepali-date-converter": "^3.3.1"
 	}
-}
+}

src/lib/ad-picker/CalendarAD.svelte

@@ -160,7 +160,7 @@
 											<p class="ut--p--text-day">
 												<button
 													style="border-style: none;"
-													class="ut--button--basic"
+													class="ut--button--unselected-day ut--button--basic"
 													style:font-weight={inCurrentMonth && currentDay === i ? '800' : '400'}
 													on:click={() => {
 														selectDate(selectedYear, selectedMonth, i);
@@ -174,7 +174,7 @@
 										<p class="ut--p--text-day">
 											<button
 												type="button"
-												class="ut--button--basic"
+												class="ut--button--basic ut--button--unselected-day"
 												style="border-style: none; color:gray;"
 												on:click={() => {
 													i < 0
@@ -245,6 +245,14 @@
 		text-align: center;
 		background-color: #ffffff;
 	}
+	.ut--button--unselected-day {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 1.25rem;
+		height: 1.25rem;
+		border-radius: 0.25rem;
+	}
 
 	.ut--button--selected-day {
 		display: flex;

src/lib/ad-picker/DatePicker.svelte

@@ -2,6 +2,7 @@
 	import CalendarAD from './CalendarAD.svelte';
 	import { clickOutside } from '$lib/common/clickOutside';
 	import type { DateFormat } from '../common/types';
+	import { createEventDispatcher } from 'svelte';
 	export let dateformat: DateFormat = 'YYYY-MM-DD';
 	export let hidelabel = false;
 	export let placeholder = 'YYYY-MM-DD';
@@ -10,8 +11,12 @@
 	export let restrictfuture = false;
 	export let value: string | Date; // YYYY/MM/DD is storing Format!
 
+	const dispatch = createEventDispatcher();
+
 	let isOpenCalendar = false; // true: show calendar
 	let selectedDate: string;
+
+	$: selectedDate && dispatch('change');
 </script>
 
 <main class="ut---main">

src/lib/bs-picker/CalendarBS.svelte

@@ -151,7 +151,7 @@
 											<p class="ut--p--text-day">
 												<button
 													type="button"
-													class="ut--button--basic"
+													class="ut--button--basic ut--button--unselected-day"
 													style="border-style: none;"
 													style:font-weight={inCurrentMonth && currentDay === i ? '800' : '400'}
 													on:click={() => {
@@ -166,7 +166,7 @@
 										<p class="ut--p--text-day">
 											<button
 												type="button"
-												class="ut--button--basic"
+												class="ut--button--basic ut--button--unselected-day"
 												style="border-style: none; color:gray;"
 												on:click={() => {
 													i < 0
@@ -238,6 +238,15 @@
 		background-color: #ffffff;
 	}
 
+	.ut--button--unselected-day {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 1.25rem;
+		height: 1.25rem;
+		border-radius: 0.25rem;
+	}
+
 	.ut--button--selected-day {
 		display: flex;
 		background-color: #4338ca;

src/lib/common/utils.ts

@@ -69,7 +69,6 @@ export function isValidDateBS(inputDate: string): boolean {
 		}
 		try {
 			const date = new NepaliDate(y, m - 1, d).format('YYYY/MM/DD');
-			console.log('Valid Date', date);
 			return true;
 		} catch (e) {
 			console.log('Invalid Date');