123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- import { createVNode as _createVNode } from "vue";
- // Styles
- import "./VDatePickerControls.css";
- // Components
- import { VBtn } from "../VBtn/index.mjs";
- import { VSpacer } from "../VGrid/index.mjs"; // Composables
- import { IconValue } from "../../composables/icons.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: IconValue,
- default: '$next'
- },
- prevIcon: {
- type: IconValue,
- default: '$prev'
- },
- modeIcon: {
- type: IconValue,
- 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(() => {
- // TODO: add slot support and scope defaults
- 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
|