refactor: boolean HTML attributes are removed from DOM when the value is false (resolves #1191)

Author: Jasenkoo

src/VueDatePicker/components/ActionRow.vue

@@ -12,7 +12,12 @@
             />
         </template>
         <template v-else>
-            <div v-if="actionRow.showPreview" class="dp__selection_preview" :title="formatValue" :style="previewStyle">
+            <div
+                v-if="actionRow.showPreview"
+                class="dp__selection_preview"
+                :title="formatValue || undefined"
+                :style="previewStyle"
+            >
                 <slot v-if="$slots['action-preview'] && showPreview" name="action-preview" :value="modelValue" />
                 <template v-if="!$slots['action-preview'] && showPreview">
                     {{ formatValue }}
@@ -45,7 +50,7 @@
                         ref="select-btn"
                         type="button"
                         class="dp__action_button dp__action_select"
-                        :disabled="disabled"
+                        :disabled="boolHtmlAttribute(disabled)"
                         data-test-id="select-button"
                         @keydown="checkKeyDown($event, () => selectDate())"
                         @click="selectDate"
@@ -62,7 +67,7 @@
     import { computed, onUnmounted, onMounted, ref, useTemplateRef } from 'vue';
     import { unrefElement } from '@vueuse/core';
 
-    import { useArrowNavigation, useContext, useFormatter, useHelperFns, useValidation } from '@/composables';
+    import { useArrowNavigation, useContext, useFormatter, useHelperFns, useValidation, useUtils } from '@/composables';
 
     interface ActionRowEmits {
         'close-picker': [];
@@ -93,6 +98,7 @@
     const { buildMatrix } = useArrowNavigation();
     const { formatPreview } = useFormatter();
     const { checkKeyDown, convertType } = useHelperFns();
+    const { boolHtmlAttribute } = useUtils();
 
     const cancelButtonRef = useTemplateRef('cancel-btn');
     const selectButtonRef = useTemplateRef('select-btn');

src/VueDatePicker/components/Common/ArrowBtn.vue

@@ -30,7 +30,7 @@
     defineProps<{
         ariaLabel?: string;
         elName?: string;
-        disabled: boolean;
+        disabled?: boolean;
     }>();
 
     const elRef = useTemplateRef('arrow-btn');

src/VueDatePicker/components/DatePicker/DpHeader.vue

@@ -25,7 +25,7 @@
                 <ArrowBtn
                     v-if="showLeftIcon(instance) && !rootProps.vertical"
                     :aria-label="ariaLabels?.prevMonth"
-                    :disabled="isDisabled(false)"
+                    :disabled="boolHtmlAttribute(isDisabled(false))"
                     :class="ui?.navBtnPrev"
                     el-name="action-prev"
                     @activate="handleMonthYearChange(false, true)"
@@ -94,7 +94,7 @@
                     v-if="showLeftIcon(instance) && rootProps.vertical"
                     :aria-label="ariaLabels?.prevMonth"
                     el-name="action-prev"
-                    :disabled="isDisabled(false)"
+                    :disabled="boolHtmlAttribute(isDisabled(false))"
                     :class="ui?.navBtnPrev"
                     @activate="handleMonthYearChange(false, true)"
                 >
@@ -105,7 +105,7 @@
                     v-if="showRightIcon(instance)"
                     ref="rightIcon"
                     el-name="action-next"
-                    :disabled="isDisabled(true)"
+                    :disabled="boolHtmlAttribute(isDisabled(true))"
                     :aria-label="ariaLabels?.nextMonth"
                     :class="ui?.navBtnNext"
                     @activate="handleMonthYearChange(true, true)"
@@ -147,6 +147,7 @@
         useContext,
         useFormatter,
         useValidation,
+        useUtils,
     } from '@/composables';
     import { useMonthYearPick } from '@/components/shared/useMonthYearPick.ts';
     import { useNavigationDisplay } from '@/components/shared/useNavigationDisplay.ts';
@@ -187,6 +188,7 @@
     const { checkKeyDown } = useHelperFns();
     const { formatYear } = useFormatter();
     const { checkMinMaxValue } = useValidation();
+    const { boolHtmlAttribute } = useUtils();
 
     const showMonthPicker = ref(false);
     const showYearPicker = ref(false);

src/VueDatePicker/components/DatePickerInput/DatepickerInput.vue

@@ -28,9 +28,9 @@
                 :class="inputClass"
                 :inputmode="inputAttrs.inputmode"
                 :placeholder="rootProps.placeholder"
-                :disabled="rootProps.disabled"
-                :readonly="rootProps.readonly"
-                :required="inputAttrs.required"
+                :disabled="boolHtmlAttribute(rootProps.disabled)"
+                :readonly="boolHtmlAttribute(rootProps.readonly)"
+                :required="boolHtmlAttribute(inputAttrs.required)"
                 :value="inputValue"
                 :autocomplete="inputAttrs.autocomplete"
                 :aria-label="ariaLabels.input"
@@ -92,7 +92,7 @@
 
     import { CalendarIcon, CancelIcon } from '@/components/Icons';
 
-    import { useContext, useHelperFns, useValidation } from '@/composables';
+    import { useContext, useHelperFns, useValidation, useUtils } from '@/composables';
     import { useInput } from '@/components/DatePickerInput/useInput.ts';
 
     import { EventKey } from '@/constants';
@@ -124,6 +124,7 @@
     const { checkMinMaxRange, isValidDate } = useValidation();
     const { parseFreeInput, textPasted, createMaskedValue, applyMaxValues } = useInput();
     const { checkKeyDown, checkStopPropagation } = useHelperFns();
+    const { boolHtmlAttribute } = useUtils();
 
     const inputRef = useTemplateRef('dp-input');
     const parsedDate = ref<InputParsedDate>(null);

src/VueDatePicker/components/QuarterPicker/QuarterPicker.vue

@@ -31,7 +31,7 @@
                                 'dp--highlighted': quarter.highlighted,
                             }"
                             :data-test-id="quarter.value"
-                            :disabled="quarter.disabled"
+                            :disabled="boolHtmlAttribute(quarter.disabled)"
                             @click="selectQuarter(quarter.value, instance, quarter.disabled)"
                             @mouseover="setHoverDate(quarter.value)"
                         >
@@ -56,7 +56,7 @@
     import YearModePicker from '@/components/shared/YearModePicker.vue';
 
     import { type QuarterPickerEmits, useQuarterPicker } from '@/components/QuarterPicker/useQuarterPicker.ts';
-    import { useContext, useSlotsMapper } from '@/composables';
+    import { useContext, useSlotsMapper, useUtils } from '@/composables';
     import type { BaseProps } from '@/types';
 
     const emit = defineEmits<QuarterPickerEmits>();
@@ -67,6 +67,7 @@
     } = useContext();
     const slots = useSlots();
     const { mapSlots } = useSlotsMapper();
+    const { boolHtmlAttribute } = useUtils();
 
     const yearModeSlots = mapSlots(slots, 'yearMode');
 

src/VueDatePicker/components/TimePicker/TimeInput.vue

@@ -56,7 +56,7 @@
                         'dp--time-overlay-btn': !disabledBox(timeInput.type),
                         'dp--hidden-el': timeOverlayOpen,
                     }"
-                    :disabled="checkOverlayDisabled(timeInput.type)"
+                    :disabled="boolHtmlAttribute(checkOverlayDisabled(timeInput.type))"
                     tabindex="0"
                     :data-test-id="`${timeInput.type}-toggle-overlay-btn-${props.order}`"
                     @keydown="checkKeyDown($event, () => toggleOverlay(timeInput.type), true)"
@@ -177,7 +177,14 @@
     import { ChevronUpIcon, ChevronDownIcon, ClockIcon, CalendarIcon } from '@/components/Icons';
     import SelectionOverlay from '@/components/Common/SelectionOverlay.vue';
 
-    import { useTransitions, useArrowNavigation, useContext, useHelperFns, useDateUtils } from '@/composables';
+    import {
+        useTransitions,
+        useArrowNavigation,
+        useContext,
+        useHelperFns,
+        useDateUtils,
+        useUtils,
+    } from '@/composables';
     import type {
         DynamicClass,
         Hour12,
@@ -224,6 +231,7 @@
         defaults: { ariaLabels, filters, config, range, multiCalendars, timeConfig },
     } = useContext();
     const { checkKeyDown, hoursToAmPmHours } = useHelperFns();
+    const { boolHtmlAttribute } = useUtils();
 
     const { sanitizeTime, groupListAndMap } = useDateUtils();
     const { transitionName, showTransition } = useTransitions();

src/VueDatePicker/components/shared/YearModePicker.vue

@@ -4,7 +4,7 @@
             v-if="showLeftIcon(instance)"
             ref="mpPrevIconRef"
             :aria-label="ariaLabels?.prevYear"
-            :disabled="isDisabled(false)"
+            :disabled="boolHtmlAttribute(isDisabled(false))"
             :class="ui?.navBtnPrev"
             @activate="handleYear(false)"
         >
@@ -27,7 +27,7 @@
             v-if="showRightIcon(instance)"
             ref="mpNextIconRef"
             :aria-label="ariaLabels?.nextYear"
-            :disabled="isDisabled(true)"
+            :disabled="boolHtmlAttribute(isDisabled(true))"
             :class="ui?.navBtnNext"
             @activate="handleYear(true)"
         >
@@ -64,7 +64,7 @@
     import ArrowBtn from '@/components/Common/ArrowBtn.vue';
     import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from '@/components/Icons';
 
-    import { useContext, useFormatter, useTransitions } from '@/composables';
+    import { useContext, useFormatter, useTransitions, useUtils } from '@/composables';
     import { useNavigationDisplay } from '@/components/shared/useNavigationDisplay.ts';
 
     import type { OverlayGridItem } from '@/types';
@@ -94,6 +94,7 @@
     } = useContext();
     const { showTransition, transitionName } = useTransitions();
     const { formatYear } = useFormatter();
+    const { boolHtmlAttribute } = useUtils();
 
     const overlayOpen = ref(false);
 

src/VueDatePicker/composables/index.ts

@@ -14,3 +14,4 @@ export { useFormatter } from './useFormatter.ts';
 export { useUtilsWithContext } from './useUtilsWithContext.ts';
 export { useExposed } from './useExposed.ts';
 export { useHelperFns } from './useHelperFns.ts';
+export { useUtils } from './useUtils.ts';

src/VueDatePicker/composables/useUtils.ts

@@ -0,0 +1,9 @@
+export const useUtils = () => {
+    const boolHtmlAttribute = (value: boolean | undefined) => {
+        return value ? true : undefined;
+    };
+
+    return {
+        boolHtmlAttribute,
+    };
+};