refactor: #7090 for SpeedDial

primefaces · Jan 14, 2025 · 157883e · 157883e
1 parent 4ba78a8
commit 157883e
Showing 1 changed file with 8 additions and 15 deletions.
diff --git a/packages/primevue/src/speeddial/SpeedDial.vue b/packages/primevue/src/speeddial/SpeedDial.vue
@@ -6,7 +6,7 @@
                 :disabled="disabled"
                 :aria-expanded="d_visible"
                 :aria-haspopup="true"
-                :aria-controls="id + '_list'"
+                :aria-controls="$id + '_list'"
                 :aria-label="ariaLabel"
                 :aria-labelledby="ariaLabelledby"
                 :unstyled="unstyled"
@@ -23,16 +23,16 @@
                 </template>
             </Button>
         </slot>
-        <ul :ref="listRef" :id="id + '_list'" :class="cx('list')" :style="sx('list')" role="menu" tabindex="-1" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" v-bind="ptm('list')">
+        <ul :ref="listRef" :id="$id + '_list'" :class="cx('list')" :style="sx('list')" role="menu" tabindex="-1" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" v-bind="ptm('list')">
             <template v-for="(item, index) of model" :key="index">
                 <li
                     v-if="isItemVisible(item)"
-                    :id="`${id}_${index}`"
-                    :class="cx('item', { id: `${id}_${index}` })"
+                    :id="`${$id}_${index}`"
+                    :class="cx('item', { id: `${$id}_${index}` })"
                     :style="getItemStyle(index)"
                     role="none"
-                    :data-p-active="isItemActive(`${id}_${index}`)"
-                    v-bind="getPTOptions(`${id}_${index}`, 'item')"
+                    :data-p-active="isItemActive(`${$id}_${index}`)"
+                    v-bind="getPTOptions(`${$id}_${index}`, 'item')"
                 >
                     <template v-if="!$slots.item">
                         <Button
@@ -45,11 +45,11 @@
                             :unstyled="unstyled"
                             @click="onItemClick($event, item)"
                             v-bind="actionButtonProps"
-                            :pt="getPTOptions(`${id}_${index}`, 'pcAction')"
+                            :pt="getPTOptions(`${$id}_${index}`, 'pcAction')"
                         >
                             <template v-if="item.icon" #icon="slotProps">
                                 <slot name="itemicon" :item="item" :class="slotProps.class">
-                                    <span :class="[item.icon, slotProps.class]" v-bind="getPTOptions(`${id}_${index}`, 'actionIcon')"></span>
+                                    <span :class="[item.icon, slotProps.class]" v-bind="getPTOptions(`${$id}_${index}`, 'actionIcon')"></span>
                                 </slot>
                             </template>
                         </Button>
@@ -67,7 +67,6 @@
 <script>
 import { $dt } from '@primeuix/styled';
 import { find, findSingle, focus, hasClass } from '@primeuix/utils/dom';
-import { UniqueComponentId } from '@primevue/core/utils';
 import PlusIcon from '@primevue/icons/plus';
 import Button from 'primevue/button';
 import Ripple from 'primevue/ripple';
@@ -87,24 +86,18 @@ export default {
     list: null,
     data() {
         return {
-            id: this.$attrs.id,
             d_visible: this.visible,
             isItemClicked: false,
             focused: false,
             focusedOptionIndex: -1
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        },
         visible(newValue) {
             this.d_visible = newValue;
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
-
         if (this.type !== 'linear') {
             const button = findSingle(this.container, '[data-pc-name="pcbutton"]');
             const firstItem = findSingle(this.list, '[data-pc-section="item"]');