routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+222
@@ -0,0 +1,222 @@
|
||||
import { createVNode as _createVNode, Fragment as _Fragment, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
|
||||
// Styles
|
||||
import "./VDatePickerControls.css";
|
||||
|
||||
// Components
|
||||
import { VBtn } from "../VBtn/index.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { VSpacer } from "../VGrid/index.js"; // Composables
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { useLocale } from "../../composables/locale.js"; // Utilities
|
||||
import { computed } from 'vue';
|
||||
import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVDatePickerControlsProps = propsFactory({
|
||||
active: {
|
||||
type: [String, Array],
|
||||
default: undefined
|
||||
},
|
||||
controlHeight: [Number, String],
|
||||
controlVariant: {
|
||||
type: String,
|
||||
default: 'docked'
|
||||
},
|
||||
noMonthPicker: Boolean,
|
||||
disabled: {
|
||||
type: [Boolean, String, Array],
|
||||
default: null
|
||||
},
|
||||
nextIcon: {
|
||||
type: IconValue,
|
||||
default: '$next'
|
||||
},
|
||||
prevIcon: {
|
||||
type: IconValue,
|
||||
default: '$prev'
|
||||
},
|
||||
modeIcon: {
|
||||
type: IconValue,
|
||||
default: '$subgroup'
|
||||
},
|
||||
text: String,
|
||||
monthText: String,
|
||||
yearText: 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:prev-year': () => true,
|
||||
'click:next-year': () => true
|
||||
},
|
||||
setup(props, {
|
||||
emit,
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
t
|
||||
} = useLocale();
|
||||
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 disablePrevMonth = computed(() => {
|
||||
return Array.isArray(props.disabled) ? props.disabled.includes('prev-month') : !!props.disabled;
|
||||
});
|
||||
const disableNextMonth = computed(() => {
|
||||
return Array.isArray(props.disabled) ? props.disabled.includes('next-month') : !!props.disabled;
|
||||
});
|
||||
const disablePrevYear = computed(() => {
|
||||
return Array.isArray(props.disabled) ? props.disabled.includes('prev-year') : !!props.disabled;
|
||||
});
|
||||
const disableNextYear = computed(() => {
|
||||
return Array.isArray(props.disabled) ? props.disabled.includes('next-year') : !!props.disabled;
|
||||
});
|
||||
function onClickPrevMonth() {
|
||||
emit('click:prev');
|
||||
}
|
||||
function onClickNextMonth() {
|
||||
emit('click:next');
|
||||
}
|
||||
function onClickPrevYear() {
|
||||
emit('click:prev-year');
|
||||
}
|
||||
function onClickNextYear() {
|
||||
emit('click:next-year');
|
||||
}
|
||||
function onClickYear() {
|
||||
emit('click:year');
|
||||
}
|
||||
function onClickMonth() {
|
||||
emit('click:month');
|
||||
}
|
||||
useRender(() => {
|
||||
const innerDefaults = {
|
||||
VBtn: {
|
||||
density: 'comfortable',
|
||||
variant: 'text'
|
||||
}
|
||||
};
|
||||
const prevMonth = _createVNode(VBtn, {
|
||||
"data-testid": "prev-month",
|
||||
"disabled": disablePrevMonth.value,
|
||||
"icon": props.prevIcon,
|
||||
"aria-label": t('$vuetify.datePicker.ariaLabel.previousMonth'),
|
||||
"onClick": onClickPrevMonth
|
||||
}, null);
|
||||
const nextMonth = _createVNode(VBtn, {
|
||||
"data-testid": "next-month",
|
||||
"disabled": disableNextMonth.value,
|
||||
"icon": props.nextIcon,
|
||||
"aria-label": t('$vuetify.datePicker.ariaLabel.nextMonth'),
|
||||
"onClick": onClickNextMonth
|
||||
}, null);
|
||||
const prevYear = _createVNode(VBtn, {
|
||||
"data-testid": "prev-year",
|
||||
"disabled": disablePrevYear.value,
|
||||
"icon": props.prevIcon,
|
||||
"aria-label": t('$vuetify.datePicker.ariaLabel.previousYear'),
|
||||
"onClick": onClickPrevYear
|
||||
}, null);
|
||||
const nextYear = _createVNode(VBtn, {
|
||||
"data-testid": "next-year",
|
||||
"disabled": disableNextYear.value,
|
||||
"icon": props.nextIcon,
|
||||
"aria-label": t('$vuetify.datePicker.ariaLabel.nextYear'),
|
||||
"onClick": onClickNextYear
|
||||
}, null);
|
||||
const onlyMonthBtn = _createVNode(VBtn, {
|
||||
"class": "v-date-picker-controls__only-month-btn",
|
||||
"data-testid": "month-btn",
|
||||
"density": "default",
|
||||
"disabled": disableMonth.value,
|
||||
"text": props.monthText,
|
||||
"appendIcon": props.modeIcon,
|
||||
"rounded": true,
|
||||
"aria-label": t('$vuetify.datePicker.ariaLabel.selectMonth'),
|
||||
"onClick": onClickMonth
|
||||
}, null);
|
||||
const onlyYearBtn = _createVNode(VBtn, {
|
||||
"class": "v-date-picker-controls__only-year-btn",
|
||||
"data-testid": "year-btn",
|
||||
"density": "default",
|
||||
"disabled": disableYear.value,
|
||||
"text": props.yearText,
|
||||
"appendIcon": props.modeIcon,
|
||||
"rounded": true,
|
||||
"aria-label": t('$vuetify.datePicker.ariaLabel.selectYear'),
|
||||
"onClick": onClickYear
|
||||
}, null);
|
||||
const monthYearBtn = _createVNode(VBtn, {
|
||||
"class": "v-date-picker-controls__year-btn",
|
||||
"data-testid": "year-btn",
|
||||
"density": "default",
|
||||
"disabled": disableYear.value,
|
||||
"text": props.text,
|
||||
"appendIcon": props.modeIcon,
|
||||
"rounded": true,
|
||||
"aria-label": t('$vuetify.datePicker.ariaLabel.selectYear'),
|
||||
"onClick": onClickYear
|
||||
}, null);
|
||||
const monthYearSplit = _createElementVNode(_Fragment, null, [_createVNode(VBtn, {
|
||||
"class": "v-date-picker-controls__month-btn",
|
||||
"data-testid": "month-btn",
|
||||
"height": "36",
|
||||
"disabled": disableMonth.value,
|
||||
"text": props.text,
|
||||
"rounded": true,
|
||||
"aria-label": t('$vuetify.datePicker.ariaLabel.selectMonth'),
|
||||
"onClick": onClickMonth
|
||||
}, null), _createVNode(VBtn, {
|
||||
"class": "v-date-picker-controls__mode-btn",
|
||||
"data-testid": "year-btn",
|
||||
"disabled": disableYear.value,
|
||||
"icon": props.modeIcon,
|
||||
"aria-label": t('$vuetify.datePicker.ariaLabel.selectYear'),
|
||||
"onClick": onClickYear
|
||||
}, null)]);
|
||||
const slotProps = {
|
||||
viewMode: props.viewMode,
|
||||
disabled: Array.isArray(props.disabled) ? props.disabled : [],
|
||||
monthYearText: props.text ?? '',
|
||||
monthText: props.monthText ?? '',
|
||||
yearText: props.yearText ?? '',
|
||||
openMonths: onClickMonth,
|
||||
openYears: onClickYear,
|
||||
prevMonth: onClickPrevMonth,
|
||||
nextMonth: onClickNextMonth,
|
||||
prevYear: onClickPrevYear,
|
||||
nextYear: onClickNextYear
|
||||
};
|
||||
const modalControls = _createElementVNode(_Fragment, null, [props.noMonthPicker ? monthYearBtn : monthYearSplit, _createVNode(VSpacer, null, null), _createElementVNode("div", {
|
||||
"class": "v-date-picker-controls__month"
|
||||
}, [prevMonth, nextMonth])]);
|
||||
const dockedControls = _createElementVNode(_Fragment, null, [_createElementVNode("div", {
|
||||
"class": "v-date-picker-controls__month"
|
||||
}, [prevMonth, onlyMonthBtn, nextMonth]), _createVNode(VSpacer, null, null), _createElementVNode("div", {
|
||||
"class": "v-date-picker-controls__year"
|
||||
}, [prevYear, onlyYearBtn, nextYear])]);
|
||||
return _createVNode(VDefaultsProvider, {
|
||||
"defaults": innerDefaults
|
||||
}, {
|
||||
default: () => [_createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-date-picker-controls', `v-date-picker-controls--variant-${props.controlVariant}`]),
|
||||
"style": {
|
||||
'--v-date-picker-controls-height': convertToUnit(props.controlHeight)
|
||||
}
|
||||
}, [slots.default?.(slotProps) ?? _createElementVNode(_Fragment, null, [props.controlVariant === 'modal' && modalControls, props.controlVariant === 'docked' && dockedControls])])]
|
||||
});
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VDatePickerControls.js.map
|
||||
Reference in New Issue
Block a user