vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

refactor: #7090 for SpeedDial

pull/7064/merge
Mert Sincan 2025-01-14 11:13:05 +00:00
parent 4ba78a88a6
commit 157883e0bf
1 changed files with 8 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/primevue/src/speeddial/SpeedDial.vue
View File

@ -6,7 +6,7 @@
:disabled="disabled" :disabled="disabled"
:aria-expanded="d_visible" :aria-expanded="d_visible"
:aria-haspopup="true" :aria-haspopup="true"
:aria-controls="id + '_list'" :aria-controls="$id + '_list'"
:aria-label="ariaLabel" :aria-label="ariaLabel"
:aria-labelledby="ariaLabelledby" :aria-labelledby="ariaLabelledby"
:unstyled="unstyled" :unstyled="unstyled"
@ -23,16 +23,16 @@
</template> </template>
</Button> </Button>
</slot> </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"> <template v-for="(item, index) of model" :key="index">
<li <li
v-if="isItemVisible(item)" v-if="isItemVisible(item)"
:id="`${id}_${index}`" :id="`${$id}_${index}`"
:class="cx('item', { id: `${id}_${index}` })" :class="cx('item', { id: `${$id}_${index}` })"
:style="getItemStyle(index)" :style="getItemStyle(index)"
role="none" role="none"
:data-p-active="isItemActive(`${id}_${index}`)" :data-p-active="isItemActive(`${$id}_${index}`)"
v-bind="getPTOptions(`${id}_${index}`, 'item')" v-bind="getPTOptions(`${$id}_${index}`, 'item')"
> >
<template v-if="!$slots.item"> <template v-if="!$slots.item">
<Button <Button
@ -45,11 +45,11 @@
:unstyled="unstyled" :unstyled="unstyled"
@click="onItemClick($event, item)" @click="onItemClick($event, item)"
v-bind="actionButtonProps" v-bind="actionButtonProps"
:pt="getPTOptions(`${id}_${index}`, 'pcAction')" :pt="getPTOptions(`${$id}_${index}`, 'pcAction')"
> >
<template v-if="item.icon" #icon="slotProps"> <template v-if="item.icon" #icon="slotProps">
<slot name="itemicon" :item="item" :class="slotProps.class"> <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> </slot>
</template> </template>
</Button> </Button>
@ -67,7 +67,6 @@
<script> <script>
import { $dt } from '@primeuix/styled'; import { $dt } from '@primeuix/styled';
import { find, findSingle, focus, hasClass } from '@primeuix/utils/dom'; import { find, findSingle, focus, hasClass } from '@primeuix/utils/dom';
import { UniqueComponentId } from '@primevue/core/utils';
import PlusIcon from '@primevue/icons/plus'; import PlusIcon from '@primevue/icons/plus';
import Button from 'primevue/button'; import Button from 'primevue/button';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
@ -87,7 +86,6 @@ export default {
list: null, list: null,
data() { data() {
return { return {
id: this.$attrs.id,
d_visible: this.visible, d_visible: this.visible,
isItemClicked: false, isItemClicked: false,
focused: false, focused: false,
@ -95,16 +93,11 @@ export default {
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
visible(newValue) { visible(newValue) {
this.d_visible = newValue; this.d_visible = newValue;
} }
}, },
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
if (this.type !== 'linear') { if (this.type !== 'linear') {
const button = findSingle(this.container, '[data-pc-name="pcbutton"]'); const button = findSingle(this.container, '[data-pc-name="pcbutton"]');
const firstItem = findSingle(this.list, '[data-pc-section="item"]'); const firstItem = findSingle(this.list, '[data-pc-section="item"]');