113 lines
3.2 KiB
JavaScript
113 lines
3.2 KiB
JavaScript
import { createVNode as _createVNode } from "vue";
|
|
// Styles
|
|
import "./VDatePickerControls.css";
|
|
|
|
// Components
|
|
import { VBtn } from "../VBtn/index.mjs";
|
|
import { VSpacer } from "../VGrid/index.mjs"; // Utilities
|
|
import { computed } from 'vue';
|
|
import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
|
|
export const makeVDatePickerControlsProps = propsFactory({
|
|
active: {
|
|
type: [String, Array],
|
|
default: undefined
|
|
},
|
|
disabled: {
|
|
type: [Boolean, String, Array],
|
|
default: false
|
|
},
|
|
nextIcon: {
|
|
type: [String],
|
|
default: '$next'
|
|
},
|
|
prevIcon: {
|
|
type: [String],
|
|
default: '$prev'
|
|
},
|
|
modeIcon: {
|
|
type: [String],
|
|
default: '$subgroup'
|
|
},
|
|
text: String,
|
|
viewMode: {
|
|
type: String,
|
|
default: 'month'
|
|
}
|
|
}, 'VDatePickerControls');
|
|
export const VDatePickerControls = genericComponent()({
|
|
name: 'VDatePickerControls',
|
|
props: makeVDatePickerControlsProps(),
|
|
emits: {
|
|
'click:year': () => true,
|
|
'click:month': () => true,
|
|
'click:prev': () => true,
|
|
'click:next': () => true,
|
|
'click:text': () => true
|
|
},
|
|
setup(props, _ref) {
|
|
let {
|
|
emit
|
|
} = _ref;
|
|
const disableMonth = computed(() => {
|
|
return Array.isArray(props.disabled) ? props.disabled.includes('text') : !!props.disabled;
|
|
});
|
|
const disableYear = computed(() => {
|
|
return Array.isArray(props.disabled) ? props.disabled.includes('mode') : !!props.disabled;
|
|
});
|
|
const disablePrev = computed(() => {
|
|
return Array.isArray(props.disabled) ? props.disabled.includes('prev') : !!props.disabled;
|
|
});
|
|
const disableNext = computed(() => {
|
|
return Array.isArray(props.disabled) ? props.disabled.includes('next') : !!props.disabled;
|
|
});
|
|
function onClickPrev() {
|
|
emit('click:prev');
|
|
}
|
|
function onClickNext() {
|
|
emit('click:next');
|
|
}
|
|
function onClickYear() {
|
|
emit('click:year');
|
|
}
|
|
function onClickMonth() {
|
|
emit('click:month');
|
|
}
|
|
useRender(() => {
|
|
return _createVNode("div", {
|
|
"class": ['v-date-picker-controls']
|
|
}, [_createVNode(VBtn, {
|
|
"class": "v-date-picker-controls__month-btn",
|
|
"disabled": disableMonth.value,
|
|
"text": props.text,
|
|
"variant": "text",
|
|
"rounded": true,
|
|
"onClick": onClickMonth
|
|
}, null), _createVNode(VBtn, {
|
|
"key": "mode-btn",
|
|
"class": "v-date-picker-controls__mode-btn",
|
|
"disabled": disableYear.value,
|
|
"density": "comfortable",
|
|
"icon": props.modeIcon,
|
|
"variant": "text",
|
|
"onClick": onClickYear
|
|
}, null), _createVNode(VSpacer, {
|
|
"key": "mode-spacer"
|
|
}, null), _createVNode("div", {
|
|
"key": "month-buttons",
|
|
"class": "v-date-picker-controls__month"
|
|
}, [_createVNode(VBtn, {
|
|
"disabled": disablePrev.value,
|
|
"icon": props.prevIcon,
|
|
"variant": "text",
|
|
"onClick": onClickPrev
|
|
}, null), _createVNode(VBtn, {
|
|
"disabled": disableNext.value,
|
|
"icon": props.nextIcon,
|
|
"variant": "text",
|
|
"onClick": onClickNext
|
|
}, null)])]);
|
|
});
|
|
return {};
|
|
}
|
|
});
|
|
//# sourceMappingURL=VDatePickerControls.mjs.map
|