feat: Remove uid prop

Author: Jasenkoo

index.d.ts

@@ -4,7 +4,6 @@ import { DefineComponent, ComputedOptions, ComponentOptionsMixin, MethodOptions
 type EmitEvents = 'update:modelValue' | 'textSubmit' | 'closed' | 'cleared';
 
 interface Vue3DatePicker {
-    uid?: string;
     is24?: boolean;
     enableTimePicker?: boolean;
     range?: boolean;

src/Vue3DatePicker/Vue3DatePicker.vue

@@ -16,7 +16,6 @@
                 range,
                 isMenuOpen: isOpen,
                 pattern: defaultPattern,
-                uid,
             }"
             v-model:input-value="inputValue"
             @clear="clearValue"
@@ -35,7 +34,6 @@
                 :class="theme"
                 :style="menuPosition"
                 v-bind="{
-                    uid,
                     weekNumbers,
                     weekStart,
                     disableMonthYearSelect,
@@ -126,7 +124,6 @@
 
     const emit = defineEmits(['update:modelValue', 'textSubmit', 'closed', 'cleared']);
     const props = defineProps({
-        uid: { type: String as PropType<string>, default: 'dp' },
         is24: { type: Boolean as PropType<boolean>, default: true },
         enableTimePicker: { type: Boolean as PropType<boolean>, default: true },
         locale: { type: String as PropType<string>, default: 'en-US' },
@@ -231,8 +228,9 @@
 
     const { openOnTop, menuPosition, setMenuPosition, recalculatePosition } = usePosition(
         props.position,
-        props.uid,
         props.altPosition,
+        dpMenuRef,
+        inputRef,
     );
 
     const { internalModelValue, inputValue, parseExternalModelValue, emitModelValue, checkBeforeEmit } =

src/Vue3DatePicker/components/DatepickerInput.vue

@@ -1,7 +1,6 @@
 <template>
     <div
         @click="handleOpen"
-        :id="`dp__input_${uid}`"
         aria-label="Datepicker input"
         role="textbox"
         aria-multiline="false"
@@ -75,7 +74,6 @@
         textInputOptions: { type: Object as PropType<ITextInputOptions>, default: () => null },
         isMenuOpen: { type: Boolean as PropType<boolean>, default: false },
         pattern: { type: String as PropType<string>, default: '' },
-        uid: { type: String as PropType<string>, default: 'dp' },
     });
     const parsedDate = ref();
 

src/Vue3DatePicker/components/DatepickerMenu.vue

@@ -1,14 +1,13 @@
 <template>
     <div
         :class="dpMenuClass"
-        :id="`dp__menu_${uid}`"
         @mouseleave="clearHoverDate"
         role="dialog"
         aria-label="Datepicker menu"
         @click="handleDpMenuClick"
     >
         <div :class="arrowClass" v-if="!inline"></div>
-        <div :class="menuCalendarClassWrapper" :id="`dp__calendar_wrapper_${uid}`" role="document">
+        <div :class="menuCalendarClassWrapper" ref="calendarWrapperRef" role="document">
             <Calendar
                 v-bind="calendarProps"
                 :instance="1"
@@ -94,7 +93,7 @@
         WeekStartStr,
     } from '../interfaces';
     import { mapSlots } from './composition/slots';
-    import { getCalendarDays, getMonths, getYears } from '../utils/util';
+    import { getCalendarDays, getMonths, getYears, unrefElement } from '../utils/util';
     import { useCalendar } from './composition/calendar';
     import { isDateEqual } from '../utils/date-utils';
 
@@ -107,7 +106,6 @@
         'timeUpdate',
     ]);
     const props = defineProps({
-        uid: { type: String as PropType<string>, default: 'dp' },
         internalModelValue: { type: [Date, Array] as PropType<InternalModuleValue>, default: null },
         weekNumbers: { type: Boolean as PropType<boolean>, default: false },
         weekStart: { type: [Number, String] as PropType<WeekStartNum | WeekStartStr>, default: 1 },
@@ -160,12 +158,13 @@
         allowedDates: { type: Array as PropType<string[] | Date[]>, default: () => [] },
     });
     const slots = useSlots();
+    const calendarWrapperRef = ref(null);
     const calendarWidth = ref(0);
     const menuMount = ref(false);
 
     onMounted(() => {
         menuMount.value = true;
-        const el = document.getElementById(`dp__calendar_wrapper_${props.uid}`);
+        const el = unrefElement(calendarWrapperRef);
         if (el) {
             calendarWidth.value = el.getBoundingClientRect().width;
         }

src/Vue3DatePicker/components/MonthYearInput.vue

@@ -27,7 +27,7 @@
             </div>
             <SelectionGrid
                 v-if="showMonthPicker"
-                v-bind="{ modelValue: month, items: groupedMonths, disabledValues: filters.months, uid: instance }"
+                v-bind="{ modelValue: month, items: groupedMonths, disabledValues: filters.months }"
                 @update:modelValue="onMonthUpdate"
                 @toggle="toggleMonthPicker"
             >
@@ -41,7 +41,7 @@
             </SelectionGrid>
             <SelectionGrid
                 v-if="showYearPicker"
-                v-bind="{ modelValue: year, items: groupedYears, disabledValues: filters.years, uid: instance }"
+                v-bind="{ modelValue: year, items: groupedYears, disabledValues: filters.years }"
                 @update:modelValue="onYearUpdate"
                 @toggle="toggleYearPicker"
                 ><template #button-icon>
@@ -98,8 +98,6 @@
                             modelValue: year,
                             items: groupedYears,
                             disabledValues: filters.years,
-                            gridId: 'dp__overlay_inner',
-                            uid: 'inner',
                         }"
                         @update:modelValue="onYearUpdate"
                         @toggle="toggleYearPicker"

src/Vue3DatePicker/components/SelectionGrid.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="dp__overlay" :id="gridId" :class="dpOverlayClass" role="dialog">
+    <div class="dp__overlay" ref="gridWrapRef" :class="dpOverlayClass" role="dialog">
         <div class="dp__overlay_container" role="grid">
             <div class="dp__selection_grid_header"><slot name="header"></slot></div>
             <div class="dp__overlay_row" v-for="(row, i) in mappedItems" :key="getKey(i)" role="row">
@@ -11,9 +11,7 @@
                     @click="onClick(col.value)"
                     :aria-selected="col.value === modelValue && !disabledValues.includes(col.value)"
                     :aria-disabled="col.className.dp__overlay_cell_disabled"
-                    :id="
-                        col.value === modelValue && !disabledValues.includes(col.value) ? `selection-active${uid}` : ''
-                    "
+                    :ref="col.value === modelValue && !disabledValues.includes(col.value) ? `selectionActiveRef` : ''"
                 >
                     <div :class="col.className">
                         <slot v-if="$slots.item" name="item" :item="col" />
@@ -38,28 +36,28 @@
     import { computed, onMounted, PropType, ref } from 'vue';
 
     import { IDefaultSelect, DynamicClass } from '../interfaces';
-    import { getKey } from '../utils/util';
+    import { getKey, unrefElement } from '../utils/util';
 
     const emit = defineEmits(['update:modelValue', 'selected', 'toggle']);
 
     const props = defineProps({
-        uid: { type: [String, Number] as PropType<string | number>, default: '' },
         items: { type: Array as PropType<IDefaultSelect[][]>, default: () => [] },
         modelValue: { type: [String, Number] as PropType<string | number>, default: null },
-        gridId: { type: String as PropType<string>, default: 'dp__overlay' },
         disabledValues: { type: Array as PropType<number[]>, default: () => [] },
         minValue: { type: [Number, String] as PropType<number | string>, default: null },
         maxValue: { type: [Number, String] as PropType<number | string>, default: null },
     });
 
     const scrollable = ref(false);
+    const selectionActiveRef = ref(null);
+    const gridWrapRef = ref(null);
 
     /**
      * On mounted hook, set the scroll position, if any to a selected value when opening overlay
      */
     onMounted(() => {
         setScrollPosition();
-        const elm = document.getElementById(props.gridId);
+        const elm = unrefElement(gridWrapRef);
         if (elm) {
             scrollable.value = elm.clientHeight < elm.scrollHeight;
         }
@@ -124,9 +122,9 @@
      * Set scroll position in overlay based on active selection
      */
     const setScrollPosition = (): void => {
-        const el = document.getElementById(`selection-active${props.uid}`);
+        const el = unrefElement(selectionActiveRef);
         if (el) {
-            const parent = document.getElementById(props.gridId);
+            const parent = unrefElement(gridWrapRef);
             if (parent) {
                 parent.scrollTop =
                     el.offsetTop -

src/Vue3DatePicker/components/composition/position.ts

@@ -1,5 +1,6 @@
-import { OpenPosition } from '../../interfaces';
 import { ref, Ref } from 'vue';
+import { OpenPosition } from '../../interfaces';
+import { unrefElement } from '../../utils/util';
 
 interface IUsePosition {
     menuPosition: Ref<{ top: string; left: string; transform: string }>;
@@ -8,10 +9,17 @@ interface IUsePosition {
     recalculatePosition: () => void;
 }
 
+type ComponentRef = Ref<HTMLElement | null>;
+
 /**
  * Extracted code from the main component, used for calculating the position of the menu
  */
-export const usePosition = (openPosition: OpenPosition, uid: string, altPosition: boolean): IUsePosition => {
+export const usePosition = (
+    openPosition: OpenPosition,
+    altPosition: boolean,
+    menuRef: ComponentRef,
+    inputRef: ComponentRef,
+): IUsePosition => {
     const menuPosition = ref({ top: '0', left: '0', transform: 'none' });
     const openOnTop = ref(false);
     const diagonal = 10; // arrow square diagonal + 1
@@ -46,7 +54,7 @@ export const usePosition = (openPosition: OpenPosition, uid: string, altPosition
      * Recalculate param is added when the menu component is mounted so that we can check the correct space
      */
     const setMenuPosition = (recalculate = true): void => {
-        const el = document.getElementById(`dp__input_${uid}`);
+        const el = unrefElement(inputRef);
         if (el) {
             const { left, width, height } = el.getBoundingClientRect();
             const { top: offset } = altPosition ? getOffsetAlt(el) : getOffset(el);
@@ -76,14 +84,14 @@ export const usePosition = (openPosition: OpenPosition, uid: string, altPosition
      * of the input field to place the menu
      */
     const recalculatePosition = (): void => {
-        const el = document.getElementById(`dp__input_${uid}`);
+        const el = unrefElement(inputRef);
         if (el) {
             const { height: inputHeight, top } = el.getBoundingClientRect();
             const { top: offset } = altPosition ? getOffsetAlt(el) : getOffset(el);
             const fullHeight = window.innerHeight;
             const freeSpaceBottom = fullHeight - top - inputHeight;
 
-            const menuEl = document.getElementById(`dp__menu_${uid}`);
+            const menuEl = unrefElement(menuRef);
 
             if (menuEl) {
                 const { height } = menuEl.getBoundingClientRect();

src/Vue3DatePicker/directives/clickOutside.ts

@@ -1,18 +1,14 @@
 // Following code is a port of @vueuse/core clickOutside hook
-import { unref, ComponentPublicInstance, watch, getCurrentScope, onScopeDispose } from 'vue';
+import { unref, watch, getCurrentScope, onScopeDispose } from 'vue';
 import { Fn, MaybeElementRef, MaybeRef, OnClickOutsideEvents, OnClickOutsideOptions } from '../interfaces';
+import { unrefElement } from '../utils/util';
 
 const defaultWindow = typeof window !== 'undefined' ? window : undefined;
 
 const noop = () => {
     return;
 };
 
-const unrefElement = (elRef: MaybeElementRef): HTMLElement | SVGElement | undefined => {
-    const plain = unref(elRef);
-    return (plain as ComponentPublicInstance)?.$el ?? plain;
-};
-
 const tryOnScopeDispose = (fn: Fn): boolean => {
     if (getCurrentScope()) {
         onScopeDispose(fn);

src/Vue3DatePicker/utils/util.ts

@@ -4,9 +4,11 @@ import {
     IDateFilter,
     IDefaultSelect,
     ITextInputOptions,
+    MaybeElementRef,
     WeekStartNum,
 } from '../interfaces';
 import { getAddedDays, isDateEqual, resetDateTime } from './date-utils';
+import { ComponentPublicInstance, unref } from 'vue';
 
 /**
  * Depending on a week start get starting date of the current calendar
@@ -164,3 +166,8 @@ export const getKey = (index: number): string => {
     }
     return makeKey(len);
 };
+
+export const unrefElement = (elRef: MaybeElementRef): HTMLElement | undefined => {
+    const plain = unref(elRef);
+    return (plain as ComponentPublicInstance)?.$el ?? plain;
+};