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

229
components/lib/calendar/BaseCalendar.vue
View file

@ -1,227 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-calendar {
display: inline-flex;
max-width: 100%;
}
.p-calendar .p-inputtext {
flex: 1 1 auto;
width: 1%;
}
.p-calendar-w-btn .p-inputtext {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-calendar-w-btn .p-datepicker-trigger {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* Fluid */
.p-fluid .p-calendar {
display: flex;
}
.p-fluid .p-calendar .p-inputtext {
width: 1%;
}
/* Datepicker */
.p-calendar .p-datepicker {
min-width: 100%;
}
.p-datepicker {
width: auto;
}
.p-datepicker-inline {
display: inline-block;
overflow-x: auto;
}
/* Header */
.p-datepicker-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.p-datepicker-header .p-datepicker-title {
margin: 0 auto;
}
.p-datepicker-prev,
.p-datepicker-next {
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
/* Multiple Month DatePicker */
.p-datepicker-multiple-month .p-datepicker-group-container {
display: flex;
}
.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
flex: 1 1 auto;
}
/* DatePicker Table */
.p-datepicker table {
width: 100%;
border-collapse: collapse;
}
.p-datepicker td > span {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin: 0 auto;
overflow: hidden;
position: relative;
}
/* Month Picker */
.p-monthpicker-month {
width: 33.3%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
}
/* Year Picker */
.p-yearpicker-year {
width: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
}
/* Button Bar */
.p-datepicker-buttonbar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Time Picker */
.p-timepicker {
display: flex;
justify-content: center;
align-items: center;
}
.p-timepicker button {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
}
.p-timepicker > div {
display: flex;
align-items: center;
flex-direction: column;
}
/* Touch UI */
.p-datepicker-touch-ui,
.p-calendar .p-datepicker-touch-ui {
min-width: 80vw;
}
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};
const classes = {
root: ({ props, state }) => [
'p-calendar p-component p-inputwrapper',
{
'p-calendar-w-btn': props.showIcon,
'p-calendar-timeonly': props.timeOnly,
'p-calendar-disabled': props.disabled,
'p-inputwrapper-filled': props.modelValue,
'p-inputwrapper-focus': state.focused,
'p-focus': state.focused || state.overlayVisible
}
],
input: 'p-inputtext p-component',
dropdownButton: 'p-datepicker-trigger',
panel: ({ instance, props, state }) => [
'p-datepicker p-component',
{
'p-datepicker-inline': props.inline,
'p-disabled': props.disabled,
'p-datepicker-timeonly': props.timeOnly,
'p-datepicker-multiple-month': props.numberOfMonths > 1,
'p-datepicker-monthpicker': state.currentView === 'month',
'p-datepicker-yearpicker': state.currentView === 'year',
'p-datepicker-touch-ui': props.touchUI,
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
groupContainer: 'p-datepicker-group-container',
group: 'p-datepicker-group',
header: 'p-datepicker-header',
previousButton: 'p-datepicker-prev p-link',
previousIcon: 'p-datepicker-prev-icon',
title: 'p-datepicker-title',
monthTitle: 'p-datepicker-month p-link',
yearTitle: 'p-datepicker-year p-link',
decadeTitle: 'p-datepicker-decade',
nextButton: 'p-datepicker-next p-link',
nextIcon: 'p-datepicker-next-icon',
container: 'p-datepicker-calendar-container',
table: 'p-datepicker-calendar',
weekHeader: 'p-datepicker-weekheader p-disabled',
weekNumber: 'p-datepicker-weeknumber',
weekLabelContainer: 'p-disabled',
day: ({ date }) => [{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
dayLabel: ({ instance, date }) => [{ 'p-highlight': instance.isSelected(date) && date.selectable, 'p-disabled': !date.selectable }],
monthPicker: 'p-monthpicker',
month: ({ instance, month, index }) => ['p-monthpicker-month', { 'p-highlight': instance.isMonthSelected(index), 'p-disabled': !month.selectable }],
yearPicker: 'p-yearpicker',
year: ({ instance, year }) => ['p-yearpicker-year', { 'p-highlight': instance.isYearSelected(year.value), 'p-disabled': !year.selectable }],
timePicker: 'p-timepicker',
hourPicker: 'p-hour-picker',
incrementButton: 'p-link',
decrementButton: 'p-link',
separatorContainer: 'p-separator',
minutePicker: 'p-minute-picker',
incrementButton: 'p-link',
decrementButton: 'p-link',
secondPicker: 'p-second-picker',
ampmPicker: 'p-ampm-picker',
buttonbar: 'p-datepicker-buttonbar',
todayButton: 'p-button-text',
clearButton: 'p-button-text'
};
const { load: loadStyle } = useStyle(styles, { name: 'calendar', manual: true });
import CalendarStyle from 'primevue/calendar/style';
export default {
name: 'BaseCalendar',
@ -442,11 +221,7 @@ export default {
default: null
}
},
css: {
inlineStyles,
classes,
loadStyle
},
style: CalendarStyle,
provide() {
return {
$parentInstance: this