refactor(unique-id): use composition api to generate component unique id

i7slegend · May 10, 2024 · 2fc0573 · 2fc0573
1 parent 8039d3c
commit 2fc0573
Show file tree

Hide file tree

Showing 34 changed files with 271 additions and 269 deletions.
diff --git a/components/lib/accordion/Accordion.vue b/components/lib/accordion/Accordion.vue
@@ -57,7 +57,7 @@
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
-import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import { DomHandler, useUniqueId } from 'primevue/utils';
 import { mergeProps } from 'vue';
 import BaseAccordion from './BaseAccordion.vue';
 
@@ -66,19 +66,19 @@ export default {
     extends: BaseAccordion,
     inheritAttrs: false,
     emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             d_activeIndex: this.activeIndex
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
         }

diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
@@ -173,7 +173,7 @@ import TimesCircleIcon from 'primevue/icons/timescircle';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
-import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, ZIndexUtils, useUniqueId } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
 import BaseAutoComplete from './BaseAutoComplete.vue';
 
@@ -189,9 +189,15 @@ export default {
     virtualScroller: null,
     searchTimeout: null,
     dirty: false,
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             clicked: false,
             focused: false,
             focusedOptionIndex: -1,
@@ -201,12 +207,6 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         suggestions() {
             if (this.searching) {
                 this.show();

diff --git a/components/lib/calendar/BaseCalendar.vue b/components/lib/calendar/BaseCalendar.vue
@@ -196,10 +196,6 @@ export default {
             type: String,
             default: null
         },
-        id: {
-            type: String,
-            default: null
-        },
         inputId: {
             type: String,
             default: null

diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
@@ -1,5 +1,5 @@
 <template>
-    <span ref="container" :id="d_id" :class="cx('root')" :style="sx('root')" v-bind="ptmi('root')">
+    <span ref="container" :id="id" :class="cx('root')" :style="sx('root')" v-bind="ptmi('root')">
         <input
             v-if="!inline"
             :ref="inputRef"
@@ -520,7 +520,7 @@ import ChevronUpIcon from 'primevue/icons/chevronup';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
-import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils, UniqueComponentId, useUniqueId } from 'primevue/utils';
 import BaseCalendar from './BaseCalendar.vue';
 
 export default {
@@ -543,9 +543,15 @@ export default {
     timePickerTimer: null,
     preventFocus: false,
     typeUpdate: false,
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            d_id: this.id,
             currentMonth: null,
             currentYear: null,
             currentHour: null,
@@ -560,12 +566,6 @@ export default {
         };
     },
     watch: {
-        id: {
-            immediate: true,
-            handler: function (newValue) {
-                this.d_id = newValue || UniqueComponentId();
-            }
-        },
         modelValue(newValue) {
             this.updateCurrentMetaData();
 
@@ -3010,7 +3010,7 @@ export default {
             return this.numberOfMonths > 1 || this.disabled;
         },
         panelId() {
-            return this.d_id + '_panel';
+            return this.id + '_panel';
         }
     },
     components: {

diff --git a/components/lib/cascadeselect/CascadeSelect.vue b/components/lib/cascadeselect/CascadeSelect.vue
@@ -83,7 +83,7 @@ import ChevronDownIcon from 'primevue/icons/chevrondown';
 import SpinnerIcon from 'primevue/icons/spinner';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
-import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, ZIndexUtils, useUniqueId } from 'primevue/utils';
 import BaseCascadeSelect from './BaseCascadeSelect.vue';
 import CascadeSelectSub from './CascadeSelectSub.vue';
 
@@ -98,9 +98,15 @@ export default {
     overlay: null,
     searchTimeout: null,
     searchValue: null,
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             clicked: false,
             focused: false,
             focusedOptionInfo: { index: -1, level: 0, parentKey: '' },
@@ -110,12 +116,6 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         options() {
             this.autoUpdateModel();
         }

diff --git a/components/lib/chips/Chips.vue b/components/lib/chips/Chips.vue
@@ -59,30 +59,28 @@
 
 <script>
 import TimesCircleIcon from 'primevue/icons/timescircle';
-import { UniqueComponentId } from 'primevue/utils';
 import BaseChips from './BaseChips.vue';
+import { useUniqueId } from 'primevue/utils';
 
 export default {
     name: 'Chips',
     extends: BaseChips,
     inheritAttrs: false,
     emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             inputValue: null,
             focused: false,
             focusedIndex: null
         };
     },
-    watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        }
-    },
     methods: {
         onWrapperClick() {
             this.$refs.input.focus();

diff --git a/components/lib/contextmenu/ContextMenu.vue b/components/lib/contextmenu/ContextMenu.vue
@@ -36,7 +36,7 @@
 
 <script>
 import Portal from 'primevue/portal';
-import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { DomHandler, ObjectUtils, ZIndexUtils, useUniqueId } from 'primevue/utils';
 import BaseContextMenu from './BaseContextMenu.vue';
 import ContextMenuSub from './ContextMenuSub.vue';
 
@@ -53,9 +53,15 @@ export default {
     pageY: null,
     container: null,
     list: null,
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             focused: false,
             focusedItemInfo: { index: -1, level: 0, parentKey: '' },
             activeItemPath: [],
@@ -64,12 +70,6 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         activeItemPath(newPath) {
             if (ObjectUtils.isNotEmpty(newPath)) {
                 this.bindOutsideClickListener();

diff --git a/components/lib/datatable/ColumnFilter.vue b/components/lib/datatable/ColumnFilter.vue
@@ -162,14 +162,21 @@ import PlusIcon from 'primevue/icons/plus';
 import TrashIcon from 'primevue/icons/trash';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
-import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils, useUniqueId } from 'primevue/utils';
 import { mergeProps } from 'vue';
 
 export default {
     name: 'ColumnFilter',
     hostName: 'DataTable',
     extends: BaseComponent,
     emits: ['filter-change', 'filter-apply', 'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     props: {
         field: {
             type: String,
@@ -279,20 +286,11 @@ export default {
     },
     data() {
         return {
-            id: this.$attrs.id,
             overlayVisible: false,
             defaultMatchMode: null,
             defaultOperator: null
         };
     },
-    watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        }
-    },
     overlay: null,
     selfClick: false,
     overlayEventListener: null,

diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue
@@ -64,7 +64,7 @@ import WindowMaximizeIcon from 'primevue/icons/windowmaximize';
 import WindowMinimizeIcon from 'primevue/icons/windowminimize';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
-import { DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { DomHandler, ZIndexUtils, UniqueComponentId, useUniqueId } from 'primevue/utils';
 import { computed } from 'vue';
 import BaseDialog from './BaseDialog.vue';
 
@@ -73,28 +73,26 @@ export default {
     extends: BaseDialog,
     inheritAttrs: false,
     emits: ['update:visible', 'show', 'hide', 'after-hide', 'maximize', 'unmaximize', 'dragend'],
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     provide() {
         return {
             dialogRef: computed(() => this._instance)
         };
     },
     data() {
         return {
-            id: this.$attrs.id,
             containerVisible: this.visible,
             maximized: false,
             focusableMax: null,
             focusableClose: null
         };
     },
-    watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        }
-    },
     documentKeydownListener: null,
     container: null,
     mask: null,

diff --git a/components/lib/dock/DockSub.vue b/components/lib/dock/DockSub.vue
@@ -58,14 +58,21 @@
 import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import Tooltip from 'primevue/tooltip';
-import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
+import { DomHandler, ObjectUtils, useUniqueId } from 'primevue/utils';
 import { mergeProps } from 'vue';
 
 export default {
     name: 'DockSub',
     hostName: 'Dock',
     extends: BaseComponent,
     emits: ['focus', 'blur'],
+    setup(props) {
+        const { id } = useUniqueId(toRef(props, 'menuId'));
+
+        return {
+            id
+        }
+    },
     props: {
         position: {
             type: String,
@@ -99,20 +106,11 @@ export default {
     },
     data() {
         return {
-            id: this.menuId,
             currentIndex: -3,
             focused: false,
             focusedOptionIndex: -1
         };
     },
-    watch: {
-        menuId: {
-            immediate: true,
-            handler(newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        }
-    },
     methods: {
         getItemId(index) {
             return `${this.id}_${index}`;