@@ -734,15 +734,10 @@ export const BCalendar = Vue.extend({
734 734
return h()
735 735
}
736 736 737 -
const isRTL = this.isRTL
737 +
const { isLive, isRTL, activeYMD, selectedYMD, safeId } = this
738 738
const hideDecadeNav = !this.showDecadeNav
739 739
const todayYMD = formatYMD(this.getToday())
740 -
const selectedYMD = this.selectedYMD
741 -
const activeYMD = this.activeYMD
742 740
const highlightToday = !this.noHighlightToday
743 -
const safeId = this.safeId
744 -
// Flag for making the `aria-live` regions live
745 -
const isLive = this.isLive
746 741
// Pre-compute some IDs
747 742
// This should be computed props
748 743
const idValue = safeId()
@@ -757,7 +752,7 @@ export const BCalendar = Vue.extend({
757 752
let $header = h(
758 753
'output',
759 754
{
760 -
staticClass: 'd-block text-center rounded border small p-1 mb-1',
755 +
staticClass: 'form-control form-control-sm text-center',
761 756
class: { 'text-muted': this.disabled, readonly: this.readonly || this.disabled },
762 757
attrs: {
763 758
id: idValue,
@@ -784,20 +779,22 @@ export const BCalendar = Vue.extend({
784 779
// We use `bdi` elements here in case the label doesn't match the locale
785 780
// Although IE 11 does not deal with <BDI> at all (equivalent to a span)
786 781
h('bdi', { staticClass: 'sr-only' }, ` (${toString(this.labelSelected)}) `),
787 -
h('bdi', {}, this.formatDateString(this.selectedDate))
782 +
h('bdi', this.formatDateString(this.selectedDate))
788 783
]
789 784
: this.labelNoDateSelected || '\u00a0' // ' '
790 785
)
791 786
$header = h(
792 787
'header',
793 788
{
794 -
class: this.hideHeader ? 'sr-only' : 'mb-1',
789 +
staticClass: 'b-calendar-header',
790 +
class: { 'sr-only': this.hideHeader },
795 791
attrs: { title: this.selectedDate ? this.labelSelectedDate || null : null }
796 792
},
797 793
[$header]
798 794
)
799 795 800 796
// Content for the date navigation buttons
797 +
// TODO: add slots for the nav button content
801 798
const $prevDecadeIcon = h(BIconChevronBarLeft, { props: { shiftV: 0.5, flipH: isRTL } })
802 799
const $prevYearIcon = h(BIconChevronDoubleLeft, { props: { shiftV: 0.5, flipH: isRTL } })
803 800
const $prevMonthIcon = h(BIconChevronLeft, { props: { shiftV: 0.5, flipH: isRTL } })
@@ -811,7 +808,7 @@ export const BCalendar = Vue.extend({
811 808
return h(
812 809
'button',
813 810
{
814 -
staticClass: 'btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1',
811 +
staticClass: 'btn btn-sm btn-outline-secondary border-0 flex-fill',
815 812
class: { disabled: btnDisabled },
816 813
attrs: {
817 814
title: label || null,
@@ -830,7 +827,7 @@ export const BCalendar = Vue.extend({
830 827
const $nav = h(
831 828
'div',
832 829
{
833 -
staticClass: 'b-calendar-nav d-flex mx-n1 mb-1',
830 +
staticClass: 'b-calendar-nav d-flex',
834 831
attrs: {
835 832
id: idNav,
836 833
role: 'group',
@@ -901,7 +898,7 @@ export const BCalendar = Vue.extend({
901 898
'header',
902 899
{
903 900
key: 'grid-caption',
904 -
staticClass: 'text-center font-weight-bold p-1 m-0',
901 +
staticClass: 'b-calendar-grid-caption text-center font-weight-bold',
905 902
class: { 'text-muted': this.disabled },
906 903
attrs: {
907 904
id: idGridCaption,
@@ -915,7 +912,10 @@ export const BCalendar = Vue.extend({
915 912
// Calendar weekday headings
916 913
const $gridWeekDays = h(
917 914
'div',
918 -
{ staticClass: 'row no-gutters border-bottom', attrs: { 'aria-hidden': 'true' } },
915 +
{
916 +
staticClass: 'b-calendar-grid-weekdays row no-gutters border-bottom',
917 +
attrs: { 'aria-hidden': 'true' }
918 +
},
919 919
this.calendarHeadings.map((d, idx) => {
920 920
return h(
921 921
'small',
@@ -1019,7 +1019,7 @@ export const BCalendar = Vue.extend({
1019 1019
const $gridHelp = h(
1020 1020
'footer',
1021 1021
{
1022 -
staticClass: 'border-top small text-muted text-center bg-light',
1022 +
staticClass: 'b-calendar-grid-help border-top small text-muted text-center bg-light',
1023 1023
attrs: {
1024 1024
id: idGridHelp
1025 1025
}
@@ -1031,7 +1031,7 @@ export const BCalendar = Vue.extend({
1031 1031
'div',
1032 1032
{
1033 1033
ref: 'grid',
1034 -
staticClass: 'form-control h-auto text-center p-0 mb-0',
1034 +
staticClass: 'b-calendar-grid form-control h-auto text-center',
1035 1035
attrs: {
1036 1036
id: idGrid,
1037 1037
role: 'application',
@@ -1057,13 +1057,12 @@ export const BCalendar = Vue.extend({
1057 1057 1058 1058
// Optional bottom slot
1059 1059
let $slot = this.normalizeSlot('default')
1060 -
$slot = $slot ? h('footer', { staticClass: 'mt-2' }, $slot) : h()
1060 +
$slot = $slot ? h('footer', { staticClass: 'b-calendar-footer' }, $slot) : h()
1061 1061 1062 1062
const $widget = h(
1063 1063
'div',
1064 1064
{
1065 1065
staticClass: 'b-calendar-inner',
1066 -
class: this.block ? 'd-block' : 'd-inline-block',
1067 1066
style: this.block ? {} : { width: this.width },
1068 1067
attrs: {
1069 1068
id: idWidget,
@@ -1093,15 +1092,6 @@ export const BCalendar = Vue.extend({
1093 1092
)
1094 1093 1095 1094
// Wrap in an outer div that can be styled
1096 -
return h(
1097 -
'div',
1098 -
{
1099 -
staticClass: 'b-calendar',
1100 -
// We use a style here rather than class `d-inline-block` so that users can
1101 -
// override the display value (`d-*` classes use the `!important` flag)
1102 -
style: this.block ? {} : { display: 'inline-block' }
1103 -
},
1104 -
[$widget]
1105 -
)
1095 +
return h('div', { staticClass: 'b-calendar', class: { 'd-block': this.block } }, [$widget])
1106 1096
}
1107 1097
})
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4