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

Refactor #4235 - For SpeedDial

pull/4243/head
Tuğçe Küçükoğlu 2023-08-05 14:31:09 +03:00
parent 067c29b071
commit 7221ec2708
2 changed files with 14 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
components/lib/speeddial/BaseSpeedDial.vue
View File

@ -79,44 +79,19 @@ const styles = `
.p-speeddial-opened .p-speeddial-rotate { .p-speeddial-opened .p-speeddial-rotate {
transform: rotate(45deg); transform: rotate(45deg);
} }
`;
/* Direction */ /* Direction */
.p-speeddial-direction-up { const inlineStyles = {
align-items: center; root: ({ props }) => ({
flex-direction: column-reverse; alignItems: props.direction === 'up' || props.direction === 'down' ? 'center' : '',
} justifyContent: props.direction === 'left' || props.direction === 'right' ? 'center' : '',
flexDirection: props.direction === 'up' ? 'column-reverse' : props.direction === 'down' ? 'column' : props.direction === 'left' ? 'row-reverse' : props.direction === 'right' ? 'row' : null
.p-speeddial-direction-up .p-speeddial-list { }),
flex-direction: column-reverse; menu: ({ props }) => ({
} flexDirection: props.direction === 'up' ? 'column-reverse' : props.direction === 'down' ? 'column' : props.direction === 'left' ? 'row-reverse' : props.direction === 'right' ? 'row' : null
})
.p-speeddial-direction-down { };
align-items: center;
flex-direction: column;
}
.p-speeddial-direction-down .p-speeddial-list {
flex-direction: column;
}
.p-speeddial-direction-left {
justify-content: center;
flex-direction: row-reverse;
}
.p-speeddial-direction-left .p-speeddial-list {
flex-direction: row-reverse;
}
.p-speeddial-direction-right {
justify-content: center;
flex-direction: row;
}
.p-speeddial-direction-right .p-speeddial-list {
flex-direction: row;
}
`;
const classes = { const classes = {
root: ({ instance, props }) => [ root: ({ instance, props }) => [
@ -223,6 +198,7 @@ export default {
}, },
css: { css: {
classes, classes,
inlineStyles,
loadStyle loadStyle
}, },
provide() { provide() {

4
components/lib/speeddial/SpeedDial.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :ref="containerRef" :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="speeddial"> <div :ref="containerRef" :class="containerClass" :style="[style, sx('root')]" v-bind="ptm('root')" data-pc-name="speeddial">
<slot name="button" :toggle="onClick"> <slot name="button" :toggle="onClick">
<SDButton <SDButton
type="button" type="button"
@ -23,7 +23,7 @@
</template> </template>
</SDButton> </SDButton>
</slot> </slot>
<ul :ref="listRef" :id="id + '_list'" :class="cx('menu')" role="menu" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :aria-activedescendant="focused ? focusedOptionId : undefined" tabindex="-1" v-bind="ptm('menu')"> <ul :ref="listRef" :id="id + '_list'" :class="cx('menu')" :style="sx('menu')" role="menu" :aria-activedescendant="focused ? focusedOptionId : undefined" tabindex="-1" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" v-bind="ptm('menu')">
<template v-for="(item, index) of model" :key="index"> <template v-for="(item, index) of model" :key="index">
<li v-if="isItemVisible(item)" :id="`${id}_${index}`" :aria-controls="`${id}_item`" :class="cx('menuitem', { id: `${id}_${index}` })" :style="getItemStyle(index)" role="menuitem" v-bind="getPTOptions(`${id}_${index}`, 'menuitem')"> <li v-if="isItemVisible(item)" :id="`${id}_${index}`" :aria-controls="`${id}_item`" :class="cx('menuitem', { id: `${id}_${index}` })" :style="getItemStyle(index)" role="menuitem" v-bind="getPTOptions(`${id}_${index}`, 'menuitem')">
<template v-if="!$slots.item"> <template v-if="!$slots.item">