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

Fixed #4530 - Export styles of all components

Browse source
This commit is contained in:
mertsincan 2023-10-02 11:46:09 +01:00
parent 7b6d458067
commit dc2913e887
463 changed files with 10696 additions and 9670 deletions
Download patch file Download diff file Expand all files Collapse all files

140
components/lib/speeddial/BaseSpeedDial.vue
View file

@ -1,138 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-speeddial {
position: absolute;
display: flex;
}
.p-speeddial-button {
z-index: 1;
}
.p-speeddial-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
transition: top 0s linear 0.2s;
pointer-events: none;
z-index: 2;
}
.p-speeddial-item {
transform: scale(0);
opacity: 0;
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
will-change: transform;
}
.p-speeddial-action {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.p-speeddial-circle .p-speeddial-item,
.p-speeddial-semi-circle .p-speeddial-item,
.p-speeddial-quarter-circle .p-speeddial-item {
position: absolute;
}
.p-speeddial-rotate {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
will-change: transform;
}
.p-speeddial-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.p-speeddial-mask-visible {
pointer-events: none;
opacity: 1;
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.p-speeddial-opened .p-speeddial-list {
pointer-events: auto;
}
.p-speeddial-opened .p-speeddial-item {
transform: scale(1);
opacity: 1;
}
.p-speeddial-opened .p-speeddial-rotate {
transform: rotate(45deg);
}
}
`;
/* Direction */
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 }) => [
`p-speeddial p-component p-speeddial-${props.type}`,
{
[`p-speeddial-direction-${props.direction}`]: props.type !== 'circle',
'p-speeddial-opened': instance.d_visible,
'p-disabled': props.disabled
}
],
button: ({ props }) => [
'p-speeddial-button p-button-rounded',
{
'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
}
],
menu: 'p-speeddial-list',
menuitem: ({ instance, id }) => [
'p-speeddial-item',
{
'p-focus': instance.isItemActive(id)
}
],
action: ({ item }) => [
'p-speeddial-action',
{
'p-disabled': item.disabled
}
],
actionIcon: 'p-speeddial-action-icon',
mask: ({ instance }) => [
'p-speeddial-mask',
{
'p-speeddial-mask-visible': instance.d_visible
}
]
};
const { load: loadStyle } = useStyle(styles, { name: 'speeddial', manual: true });
import SpeedDialStyle from 'primevue/speeddial/style';
export default {
name: 'BaseSpeedDial',
@ -198,11 +66,7 @@ export default {
default: null
}
},
css: {
classes,
inlineStyles,
loadStyle
},
style: SpeedDialStyle,
provide() {
return {
$parentInstance: this