vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3885 - For SpeedDial

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-04-24 15:44:53 +03:00
parent 9bd5a07b1d
commit 5ee054a86a
3 changed files with 108 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

18
components/lib/speeddial/SpeedDial.vue
View file

@ -1,5 +1,5 @@
<template>
<div :ref="containerRef" :class="containerClass" :style="style">
<div :ref="containerRef" :class="containerClass" :style="style" v-bind="ptm('root')">
<slot name="button" :toggle="onClick">
<SDButton
type="button"
@ -12,18 +12,19 @@
:aria-controls="id + '_list'"
:aria-label="ariaLabel"
:aria-labelledby="ariaLabelledby"
v-bind="ptm('button')"
>
<template #icon>
<slot name="icon" :visible="d_visible">
<component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="hideIcon" />
<component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="showIcon" />
<component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="hideIcon" v-bind="ptm('icon')" />
<component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="showIcon" v-bind="ptm('icon')" />
</slot>
</template>
</SDButton>
</slot>
<ul :ref="listRef" :id="id + '_list'" class="p-speeddial-list" role="menu" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :aria-activedescendant="focused ? focusedOptionId : undefined" tabindex="-1">
<ul :ref="listRef" :id="id + '_list'" class="p-speeddial-list" role="menu" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :aria-activedescendant="focused ? focusedOptionId : undefined" tabindex="-1" v-bind="ptm('list')">
<template v-for="(item, index) of model" :key="index">
<li v-if="isItemVisible(item)" :id="`${id}_${index}`" :aria-controls="`${id}_item`" class="p-speeddial-item" :class="itemClass(`${id}_${index}`)" :style="getItemStyle(index)" role="menuitem">
<li v-if="isItemVisible(item)" :id="`${id}_${index}`" :aria-controls="`${id}_item`" class="p-speeddial-item" :class="itemClass(`${id}_${index}`)" :style="getItemStyle(index)" role="menuitem" v-bind="ptm('item')">
<template v-if="!$slots.item">
<a
v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
@ -35,8 +36,9 @@
:target="item.target"
@click="onItemClick($event, item)"
:aria-label="item.label"
v-bind="ptm('action')"
>
<span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]"></span>
<span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]" v-bind="ptm('actionIcon')"></span>
</a>
</template>
<component v-else :is="$slots.item" :item="item"></component>
@ -45,11 +47,12 @@
</ul>
</div>
<template v-if="mask">
<div :class="maskClassName" :style="maskStyle"></div>
<div :class="maskClassName" :style="maskStyle" v-bind="ptm('mask')"></div>
</template>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import Button from 'primevue/button';
import PlusIcon from 'primevue/icons/plus';
import Ripple from 'primevue/ripple';
@ -58,6 +61,7 @@ import { DomHandler, UniqueComponentId } from 'primevue/utils';
export default {
name: 'SpeedDial',
extends: BaseComponent,
emits: ['click', 'show', 'hide', 'focus', 'blur'],
props: {
model: null,