@bagelink/vue 1.2.124 → 1.2.126

package/dist/components/form/inputs/DatePicker.vue.d.ts

@@ -1,3 +1,4 @@
+import { MaybeRefOrGetter } from 'vue';
 import { ModeType } from '../../../utils/calendar/typings';
 import { WEEK_START_DAY } from '../../../utils/calendar/time';
 type __VLS_Props = {
@@ -8,7 +9,7 @@ type __VLS_Props = {
     firstDayOfWeek?: WEEK_START_DAY;
     locale?: string;
     enableTime?: boolean;
-    highlightedDates?: (string | Date)[];
+    highlightedDates?: MaybeRefOrGetter<(string | Date)[]>;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;

package/dist/components/form/inputs/DatePicker.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/DatePicker.vue"],"names":[],"mappings":"AAqgBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAG/D,OAAa,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAEnE,KAAK,WAAW,GAAG;IACjB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;CACpC,CAAC;;;;;;UALM,QAAQ;YAEN,MAAM;gBACF,OAAO;oBAFH,cAAc;;AAosBjC,wBASG"}
+{"version":3,"file":"DatePicker.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/DatePicker.vue"],"names":[],"mappings":"AAwgBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAG/D,OAAa,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAEnE,KAAK,WAAW,GAAG;IACjB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;CACtD,CAAC;;;;;;UALM,QAAQ;YAEN,MAAM;gBACF,OAAO;oBAFH,cAAc;;AAssBjC,wBASG"}

package/dist/index.cjs

@@ -14967,6 +14967,7 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
+    const computedHighlightedDates = vue.computed(() => vue.toValue(props2.highlightedDates));
     const currentMonth = vue.ref(/* @__PURE__ */ new Date());
     const currentView = vue.ref("days");
     const time = new Time(props2.firstDayOfWeek, props2.locale);
@@ -15063,16 +15064,16 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
       const isNotInMonth2 = (date2) => {
         return time.isTrailingOrLeadingDate(date2, currentMonth.value.getMonth());
       };
-      const isHighlighted2 = (date2) => {
-        if (!date2 || !Array.isArray(props2.highlightedDates) || !props2.highlightedDates.length) {
+      const isHighlighted2 = vue.computed(() => (date2) => {
+        if (!date2 || !Array.isArray(computedHighlightedDates.value) || !computedHighlightedDates.value.length) {
           return false;
         }
-        return props2.highlightedDates.some((highlightedDate) => {
+        return computedHighlightedDates.value.some((highlightedDate) => {
           const parsedDate = parseDate(highlightedDate);
           if (!parsedDate) return false;
           return date2.getFullYear() === parsedDate.getFullYear() && date2.getMonth() === parsedDate.getMonth() && date2.getDate() === parsedDate.getDate();
         });
-      };
+      });
       return {
         currentMonthDays: currentMonthDays2,
         currentMonthValue: currentMonthValue2,
@@ -15314,7 +15315,7 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-2cc2cfc1"]]);
+const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-16646325"]]);
 const _hoisted_1$I = ["title"];
 const _hoisted_2$w = { key: 0 };
 const _hoisted_3$r = {

package/dist/index.mjs

@@ -14965,6 +14965,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
+    const computedHighlightedDates = computed(() => toValue(props2.highlightedDates));
     const currentMonth = ref(/* @__PURE__ */ new Date());
     const currentView = ref("days");
     const time = new Time(props2.firstDayOfWeek, props2.locale);
@@ -15061,16 +15062,16 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       const isNotInMonth2 = (date2) => {
         return time.isTrailingOrLeadingDate(date2, currentMonth.value.getMonth());
       };
-      const isHighlighted2 = (date2) => {
-        if (!date2 || !Array.isArray(props2.highlightedDates) || !props2.highlightedDates.length) {
+      const isHighlighted2 = computed(() => (date2) => {
+        if (!date2 || !Array.isArray(computedHighlightedDates.value) || !computedHighlightedDates.value.length) {
           return false;
         }
-        return props2.highlightedDates.some((highlightedDate) => {
+        return computedHighlightedDates.value.some((highlightedDate) => {
           const parsedDate = parseDate(highlightedDate);
           if (!parsedDate) return false;
           return date2.getFullYear() === parsedDate.getFullYear() && date2.getMonth() === parsedDate.getMonth() && date2.getDate() === parsedDate.getDate();
         });
-      };
+      });
       return {
         currentMonthDays: currentMonthDays2,
         currentMonthValue: currentMonthValue2,
@@ -15312,7 +15313,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-2cc2cfc1"]]);
+const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-16646325"]]);
 const _hoisted_1$I = ["title"];
 const _hoisted_2$w = { key: 0 };
 const _hoisted_3$r = {

package/dist/style.css

@@ -1494,87 +1494,87 @@ pre code.hljs {
 	outline-color: var(--input-bg);
 }
 
-.calendar-container[data-v-2cc2cfc1] {
+.calendar-container[data-v-16646325] {
 	max-width: 90vw;
 }
-.calendar-section[data-v-2cc2cfc1] {
+.calendar-section[data-v-16646325] {
 	min-width: 280px;
 }
-.calendar-grid[data-v-2cc2cfc1] {
+.calendar-grid[data-v-16646325] {
 	grid-template-columns: repeat(7, 1fr);
 }
-.month-grid[data-v-2cc2cfc1] {
+.month-grid[data-v-16646325] {
 	grid-template-columns: repeat(3, 1fr);
 	grid-template-rows: repeat(4, 1fr);
 }
-.year-grid[data-v-2cc2cfc1] {
+.year-grid[data-v-16646325] {
 	grid-template-columns: repeat(3, 1fr);
 	grid-template-rows: repeat(6, 1fr);
 }
-.month-item[data-v-2cc2cfc1],
-.year-item[data-v-2cc2cfc1] {
+.month-item[data-v-16646325],
+.year-item[data-v-16646325] {
 	background: none;
 	color: var(--bgl-text-color);
 }
-.month-item[data-v-2cc2cfc1]:hover:not(.disabled),
-.year-item[data-v-2cc2cfc1]:hover:not(.disabled) {
+.month-item[data-v-16646325]:hover:not(.disabled),
+.year-item[data-v-16646325]:hover:not(.disabled) {
 	background: var(--bgl-box-bg);
 	filter: var(--bgl-hover-filter);
 }
-.month-item[data-v-2cc2cfc1]:active:not(.disabled),
-.year-item[data-v-2cc2cfc1]:active:not(.disabled) {
+.month-item[data-v-16646325]:active:not(.disabled),
+.year-item[data-v-16646325]:active:not(.disabled) {
 	background: var(--bgl-box-bg);
 	filter: var(--bgl-active-filter);
 }
-.month-item.selected[data-v-2cc2cfc1],
-.year-item.selected[data-v-2cc2cfc1] {
+.month-item.selected[data-v-16646325],
+.year-item.selected[data-v-16646325] {
 	background-color: var(--bgl-primary);
 	color: white;
 }
-.month-item.disabled[data-v-2cc2cfc1],
-.year-item.disabled[data-v-2cc2cfc1] {
+.month-item.disabled[data-v-16646325],
+.year-item.disabled[data-v-16646325] {
 	opacity: 0.6;
 	filter: grayscale(0.3);
 }
-.day[data-v-2cc2cfc1] {
+.day[data-v-16646325] {
 	border: none;
 	background: none;
 	color: var(--bgl-text-color);
 }
-.day[data-v-2cc2cfc1]:hover:not(.disabled) {
+.day[data-v-16646325]:hover:not(.disabled) {
 	background-color: var(--input-bg);
 	color: var(--bgl-text-color);
 	outline: 1px solid var(--border-color);
 }
-.day:hover:not(.disabled).selected[data-v-2cc2cfc1] {
+.day:hover:not(.disabled).selected[data-v-16646325] {
 	filter: var(--bgl-hover-filter);
 	background-color: var(--bgl-primary);
 	color: var(--bgl-white);
 }
-.day.selected[data-v-2cc2cfc1] {
+.day.selected[data-v-16646325] {
 	background-color: var(--bgl-primary);
 	color: var(--bgl-white);
 }
-.day.today[data-v-2cc2cfc1]:not(.selected) {
+.day.today[data-v-16646325]:not(.selected) {
 	border: 1px solid var(--bgl-primary);
 }
-.day.disabled[data-v-2cc2cfc1] {
+.day.disabled[data-v-16646325] {
 	opacity: 0.6;
 	filter: grayscale(0.3);
 	cursor: not-allowed;
 }
-.day.not-in-month[data-v-2cc2cfc1] {
+.day.not-in-month[data-v-16646325] {
 	opacity: 0.4;
 }
-.day.highlighted[data-v-2cc2cfc1]:not(.selected) {
+.day.highlighted[data-v-16646325]:not(.selected) {
   background-color: var(--bgl-secondary-light, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.15));
   font-weight: 500;
 }
-.day.highlighted.selected[data-v-2cc2cfc1] {
+.day.highlighted.selected[data-v-16646325] {
   /* Add a subtle ring effect for dates that are both selected and highlighted */
   box-shadow: 0 0 0 2px var(--bgl-secondary, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.5));
 }
-.day.highlighted[data-v-2cc2cfc1]:not(.selected):hover {
+.day.highlighted[data-v-16646325]:not(.selected):hover {
   background-color: var(--bgl-secondary-light-hover, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.25));
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.2.124",
+  "version": "1.2.126",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/form/inputs/DatePicker.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { MaybeRefOrGetter } from 'vue'
 import type { ModeType } from '../../../utils/calendar/typings'
 import { Btn, NumberInput } from '@bagelink/vue'
-import { computed, ref } from 'vue'
+import { computed, ref, toValue } from 'vue'
 import Time, { WEEK_START_DAY } from '../../../utils/calendar/time'
 
 const props = withDefaults(
@@ -13,7 +14,7 @@ const props = withDefaults(
 		firstDayOfWeek?: WEEK_START_DAY
 		locale?: string
 		enableTime?: boolean
-		highlightedDates?: (string | Date)[]
+		highlightedDates?: MaybeRefOrGetter<(string | Date)[]>
 	}>(),
 	{
 		mode: () => ({ mode: 'day' }),
@@ -25,6 +26,8 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue'])
 
+const computedHighlightedDates = $computed(() => toValue(props.highlightedDates))
+
 // State
 const currentMonth = ref(new Date())
 const currentView = ref('days')
@@ -161,12 +164,12 @@ function useCalendarView() {
 	 * @param date The date to check
 	 * @returns True if the date should be highlighted
 	 */
-	const isHighlighted = (date?: Date): boolean => {
-		if (!date || !Array.isArray(props.highlightedDates) || !props.highlightedDates.length) {
+	const isHighlighted = computed(() => (date?: Date): boolean => {
+		if (!date || !Array.isArray(computedHighlightedDates) || !computedHighlightedDates.length) {
 			return false
 		}
 
-		return props.highlightedDates.some((highlightedDate) => {
+		return computedHighlightedDates.some((highlightedDate) => {
 			const parsedDate = parseDate(highlightedDate)
 			if (!parsedDate) return false
 
@@ -175,7 +178,7 @@ function useCalendarView() {
 				&& date.getMonth() === parsedDate.getMonth()
 				&& date.getDate() === parsedDate.getDate()
 		})
-	}
+	})
 
 	return {
 		currentMonthDays,