Refactor #4235 - For SpeedDial

components/lib/speeddial/BaseSpeedDial.vue

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

components/lib/speeddial/SpeedDial.vue

@@ -1,5 +1,5 @@
 <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">
             <SDButton
                 type="button"
@@ -23,7 +23,7 @@
                 </template>
             </SDButton>
         </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">
                 <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">