hamzus-ui 0.0.92 → 0.0.94

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "hamzus-ui",
-	"version": "0.0.92",
+	"version": "0.0.94",
 	"type": "module",
     "main": "index.js",
     "svelte": "index.js",

package/src/components/hamzus-ui/DatePicker/DatePicker.svelte

@@ -27,6 +27,13 @@
 	};
 	const yearList = getYearList();
 
+    const now = new Date();
+
+    const day = String(now.getDate());
+    const month = String(now.getMonth() + 1);
+    const year = now.getFullYear();
+
+
     let toggleDisplay;
 
     $: labelMonth = formatValue(value);
@@ -34,6 +41,10 @@
 	let currentYear = new Date().getFullYear();
 	let currentMonth = new Date().getMonth() + 1;
 
+	let selectedYear = new Date().getFullYear();
+	let selectedMonth = new Date().getMonth() + 1;
+	let selectedDay = null;
+
 	let weeks = generateCalendarMatrix(currentYear, currentMonth - 1);
 
     let mode = "day"
@@ -128,8 +139,13 @@
     }
 
     function handleUpdateValue(day) {
+        selectedDay = day
+
         const formatNumber = (num) => num.toString().padStart(2, '0');
 
+        selectedYear = currentYear
+        selectedMonth = currentMonth
+
         value = `${currentYear}-${formatNumber(currentMonth)}-${formatNumber(day)}`
 
         if (onChange !== undefined) {
@@ -221,10 +237,10 @@
 			<tbody>
 				{#each weeks as week}
 					<tr>
-						{#each week as day}
+						{#each week as dayData}
 							<td>
 								<div>
-                                    <IconButton onClick={!day.currentMonth ? undefined : ()=>{handleUpdateValue(day.day)}} desabled={!day.currentMonth} variant="ghost">{day.day}</IconButton>
+                                    <IconButton style={selectedDay != dayData.day && (currentYear == year && currentMonth == month && dayData.day == day) ? "background-color:var(--bg-3)" : ""} onClick={!dayData.currentMonth ? undefined : ()=>{handleUpdateValue(dayData.day)}} desabled={!dayData.currentMonth} variant={selectedDay == dayData.day && (selectedYear == currentYear && selectedMonth == currentMonth) ? "primary" : "ghost"}>{dayData.day}</IconButton>
                                 </div>
 							</td>
 						{/each}