Refactor #3965 - For SplitButton
Tuğçe Küçükoğlu
parent
8e37fa418d
commit
7a76a65fe5
|
|
@ -0,0 +1,151 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.p-splitbutton {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-splitbutton .p-splitbutton-defaultbutton,
|
||||
.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,
|
||||
.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button {
|
||||
flex: 1 1 auto;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right: 0 none;
|
||||
}
|
||||
|
||||
.p-splitbutton-menubutton,
|
||||
.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
|
||||
.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.p-splitbutton .p-menu {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-fluid .p-splitbutton {
|
||||
display: flex;
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ props }) => [
|
||||
'p-splitbutton p-component',
|
||||
{
|
||||
[`p-button-${props.severity}`]: props.severity,
|
||||
'p-button-raised': props.raised,
|
||||
'p-button-rounded': props.rounded,
|
||||
'p-button-text': props.text,
|
||||
'p-button-outlined': props.outlined,
|
||||
'p-button-sm': props.size === 'small',
|
||||
'p-button-lg': props.size === 'large'
|
||||
}
|
||||
],
|
||||
button: 'p-splitbutton-defaultbutton',
|
||||
icon: ({ props }) => props.icon,
|
||||
menuButton: 'p-splitbutton-menubutton',
|
||||
menuButtonIcon: ({ props }) => props.menuButtonIcon
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { id: 'primevue_splitbutton_style', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseSplitButton',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
model: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
autoZIndex: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
baseZIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
appendTo: {
|
||||
type: String,
|
||||
default: 'body'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
class: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
style: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
buttonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
menuButtonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
menuButtonIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
severity: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
raised: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
rounded: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
text: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
outlined: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
plain: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -163,6 +163,11 @@ export interface SplitButtonProps {
|
|||
* @type {SplitButtonPassThroughOptions}
|
||||
*/
|
||||
pt?: SplitButtonPassThroughOptions;
|
||||
/**
|
||||
* When enabled, it removes component related styles in the core.
|
||||
* @defaultValue false
|
||||
*/
|
||||
unstyled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div :class="containerClass" :style="style" v-bind="ptm('root')">
|
||||
<div :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="splitbutton" :data-pc-severity="severity">
|
||||
<slot>
|
||||
<PVSButton type="button" class="p-splitbutton-defaultbutton" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" :pt="ptm('button')" v-bind="buttonProps">
|
||||
<PVSButton type="button" :class="cx('button')" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" :pt="ptm('button')" v-bind="buttonProps">
|
||||
<template #icon="slotProps">
|
||||
<slot name="icon">
|
||||
<span :class="[icon, slotProps.class]" v-bind="ptm('button')['icon']" />
|
||||
<span :class="[cx('icon'), slotProps.class]" v-bind="ptm('button')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</PVSButton>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
<PVSButton
|
||||
ref="button"
|
||||
type="button"
|
||||
class="p-splitbutton-menubutton"
|
||||
:class="cx('menuButton')"
|
||||
:disabled="disabled"
|
||||
aria-haspopup="true"
|
||||
:aria-expanded="isExpanded"
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
>
|
||||
<template #icon="slotProps">
|
||||
<slot name="menubuttonicon">
|
||||
<component :is="menuButtonIcon ? 'span' : 'ChevronDownIcon'" :class="[menuButtonIcon, slotProps.class]" v-bind="ptm('menuButton')['icon']" />
|
||||
<component :is="menuButtonIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('menuButtonIcon'), slotProps.class]" v-bind="ptm('menuButton')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</PVSButton>
|
||||
|
|
@ -33,94 +33,16 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import Button from 'primevue/button';
|
||||
import ChevronDownIcon from 'primevue/icons/chevrondown';
|
||||
import TieredMenu from 'primevue/tieredmenu';
|
||||
import { UniqueComponentId } from 'primevue/utils';
|
||||
import BaseSplitButton from './BaseSplitButton.vue';
|
||||
|
||||
export default {
|
||||
name: 'SplitButton',
|
||||
extends: BaseComponent,
|
||||
extends: BaseSplitButton,
|
||||
emits: ['click'],
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
model: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
autoZIndex: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
baseZIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
appendTo: {
|
||||
type: String,
|
||||
default: 'body'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
class: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
style: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
buttonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
menuButtonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
menuButtonIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
severity: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
raised: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
rounded: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
text: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
outlined: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
plain: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isExpanded: false
|
||||
|
|
@ -150,19 +72,7 @@ export default {
|
|||
return UniqueComponentId();
|
||||
},
|
||||
containerClass() {
|
||||
return [
|
||||
'p-splitbutton p-component',
|
||||
this.class,
|
||||
{
|
||||
[`p-button-${this.severity}`]: this.severity,
|
||||
'p-button-raised': this.raised,
|
||||
'p-button-rounded': this.rounded,
|
||||
'p-button-text': this.text,
|
||||
'p-button-outlined': this.outlined,
|
||||
'p-button-sm': this.size === 'small',
|
||||
'p-button-lg': this.size === 'large'
|
||||
}
|
||||
];
|
||||
return [this.cx('root'), this.class];
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -172,37 +82,3 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.p-splitbutton {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-splitbutton .p-splitbutton-defaultbutton,
|
||||
.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,
|
||||
.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button {
|
||||
flex: 1 1 auto;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right: 0 none;
|
||||
}
|
||||
|
||||
.p-splitbutton-menubutton,
|
||||
.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
|
||||
.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.p-splitbutton .p-menu {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-fluid .p-splitbutton {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue