6585028051

Committed 20 Oct 2023 08:02AM UTC coverage: 86.79% (+0.04%) from 86.751%

Build # 6585028051

Build Type

push

github

Committed by

web-flow

Commit Message

chore(deps): update vue monorepo to v3.3.5

Run Details

859 of 1065 branches covered (0.0%)

Branch coverage included in aggregate %.

1539 of 1698 relevant lines covered (90.64%)

185.25 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

93.63

/src/components/datepicker/DateView.vue

<template>
  <table role="grid" style="width: 100%">
    <thead>
      <tr>
        <td>
          <btn
            class="uiv-datepicker-pager-prev"
            block
            size="sm"
            style="border: none"
            @click="goPrevMonth"
          >
            <i :class="iconControlLeft"></i>
          </btn>
        </td>
        <td :colspan="weekNumbers ? 6 : 5">
          <btn
            class="uiv-datepicker-title"
            block
            size="sm"
            style="border: none"
            @click="changeView"
          >
            <b>{{ yearMonthStr }}</b>
          </btn>
        </td>
        <td>
          <btn
            class="uiv-datepicker-pager-next"
            block
            size="sm"
            style="border: none"
            @click="goNextMonth"
          >
            <i :class="iconControlRight"></i>
          </btn>
        </td>
      </tr>
      <tr align="center">
        <td v-if="weekNumbers"></td>
        <td
          v-for="(day, index) in weekDays"
          :key="index"
          width="14.2857142857%"
        >
          <small class="uiv-datepicker-week">{{
            tWeekName(day === 0 ? 7 : day)
          }}</small>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, i) in monthDayRows" :key="i">
        <td
          v-if="weekNumbers"
          class="text-center"
          style="border-right: 1px solid #eee"
        >
          <small class="text-muted">{{
            getWeekNumber(row[weekStartsWith])
          }}</small>
        </td>
        <td v-for="(d, j) in row" :key="`${i}_${j}`">
          <btn
            block
            size="sm"
            style="border: none"
            data-action="select"
            :class="d.classes"
            :type="getBtnType(d)"
            :disabled="d.disabled"
            @click="select(d)"
          >
            <span
              data-action="select"
              :class="{ 'text-muted': month !== d.month }"
              >{{ d.date }}</span
            >
          </btn>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
import { t } from '../../locale';
import Btn from './../button/Btn.vue';
import { daysInMonth, getWeekNumber } from '../../utils/date.utils';
import { isExist, isFunction } from '../../utils/object.utils';
import { computed } from 'vue';

const props = defineProps({
  month: { type: Number, default: undefined },
  year: { type: Number, default: undefined },
  date: { type: Date, default: undefined },
  today: { type: Date, default: undefined },
  limit: { type: Object, default: undefined },
  weekStartsWith: { type: Number, default: undefined },
  iconControlLeft: { type: String, default: undefined },
  iconControlRight: { type: String, default: undefined },
  dateClass: { type: Function, default: undefined },
  yearMonthFormatter: { type: Function, default: undefined },
  weekNumbers: Boolean,
});
const emit = defineEmits([
  'date-change',
  'year-change',
  'month-change',
  'view-change',
]);

const weekDays = computed(() => {
  const days = [];
  let firstDay = props.weekStartsWith;
  while (days.length < 7) {
    days.push(firstDay++);
    if (firstDay > 6) {
      firstDay = 0;
    }
  }
  return days;
});
const yearMonthStr = computed(() => {
  if (props.yearMonthFormatter) {
    return props.yearMonthFormatter(props.year, props.month);
  } else {
    return isExist(props.month)
      ? `${props.year} ${t(`uiv.datePicker.month${props.month + 1}`)}`
      : props.year;
  }
});
const monthDayRows = computed(() => {
  const rows = [];
  const firstDay = new Date(props.year, props.month, 1);
  const prevMonthLastDate = new Date(props.year, props.month, 0).getDate();
  const startIndex = firstDay.getDay();
  // console.log(startIndex)
  const daysNum = daysInMonth(props.month, props.year);
  let weekOffset = 0;
  if (props.weekStartsWith > startIndex) {
    weekOffset = 7 - props.weekStartsWith;
  } else {
    weekOffset = 0 - props.weekStartsWith;
  }
  // console.log(prevMonthLastDate, startIndex, daysNum)
  for (let i = 0; i < 6; i++) {
    rows.push([]);
    for (let j = 0 - weekOffset; j < 7 - weekOffset; j++) {
      const currentIndex = i * 7 + j;
      const date = { year: props.year, disabled: false };
      // date in and not in current month
      if (currentIndex < startIndex) {
        date.date = prevMonthLastDate - startIndex + currentIndex + 1;
        if (props.month > 0) {
          date.month = props.month - 1;
        } else {
          date.month = 11;
          date.year--;
        }
      } else if (currentIndex < startIndex + daysNum) {
        date.date = currentIndex - startIndex + 1;
        date.month = props.month;
      } else {
        date.date = currentIndex - startIndex - daysNum + 1;
        if (props.month < 11) {
          date.month = props.month + 1;
        } else {
          date.month = 0;
          date.year++;
        }
      }
      // process limit dates
      const dateObj = new Date(date.year, date.month, date.date);
      let afterFrom = true;
      let beforeTo = true;
      if (props.limit?.from) {
        afterFrom = dateObj >= props.limit.from;
      }
      if (props.limit?.to) {
        beforeTo = dateObj < props.limit.to;
      }
      date.disabled = !afterFrom || !beforeTo;
      if (isFunction(props.dateClass)) {
        date.classes = props.dateClass(dateObj, {
          currentMonth: props.month,
          currentYear: props.year,
        });
      } else {
        date.classes = '';
      }
      rows[i].push(date);
    }
  }
  return rows;
});

function tWeekName(index) {
  return t(`uiv.datePicker.week${index}`);
}

function getBtnType(date) {
  if (
    props.date &&
    date.date === props.date.getDate() &&
    date.month === props.date.getMonth() &&
    date.year === props.date.getFullYear()
  ) {
    return 'primary';
  } else if (
    date.date === props.today.getDate() &&
    date.month === props.today.getMonth() &&
    date.year === props.today.getFullYear()
  ) {
    return 'info';
  } else {
    return 'default';
  }
}
function select(date) {
  emit('date-change', date);
}

function goPrevMonth() {
  let month = props.month;
  let year = props.year;
  if (props.month > 0) {
    month--;
  } else {
    month = 11;
    year--;
    emit('year-change', year);
  }
  emit('month-change', month);
}

function goNextMonth() {
  let month = props.month;
  let year = props.year;
  if (props.month < 11) {
    month++;
  } else {
    month = 0;
    year++;
    emit('year-change', year);
  }
  emit('month-change', month);
}

function changeView() {
  emit('view-change', 'm');
}
</script>

1	<template>
2	<table role="grid" style="width: 100%">
3	<thead>
4	<tr>	27✔
5	<td>
6	<btn
7	class="uiv-datepicker-pager-prev"	27✔
8	block
9	size="sm"
10	style="border: none"
11	@click="goPrevMonth"
12	>
13	<i :class="iconControlLeft"></i>
14	</btn>
15	</td>
16	<td :colspan="weekNumbers ? 6 : 5">
17	<btn
18	class="uiv-datepicker-title"
19	block
20	size="sm"
21	style="border: none"
22	@click="changeView"
23	>
24	<b>{{ yearMonthStr }}</b>	27✔
25	</btn>
26	</td>
27	<td>
28	<btn
29	class="uiv-datepicker-pager-next"
30	block
31	size="sm"
32	style="border: none"
33	@click="goNextMonth"
34	>
35	<i :class="iconControlRight"></i>
36	</btn>
37	</td>
38	</tr>
39	<tr align="center">
40	<td v-if="weekNumbers"></td>
41	<td
42	v-for="(day, index) in weekDays"
43	:key="index"
44	width="14.2857142857%"
45	>
46	<small class="uiv-datepicker-week">{{
47	tWeekName(day === 0 ? 7 : day)
48	}}</small>
49	</td>
50	</tr>
51	</thead>
52	<tbody>
53	<tr v-for="(row, i) in monthDayRows" :key="i">
54	<td
55	v-if="weekNumbers"
56	class="text-center"
57	style="border-right: 1px solid #eee"
58	>
59	<small class="text-muted">{{
60	getWeekNumber(row[weekStartsWith])
61	}}</small>
62	</td>
63	<td v-for="(d, j) in row" :key="`${i}_${j}`">
64	<btn
65	block
66	size="sm"
67	style="border: none"
68	data-action="select"
69	:class="d.classes"
70	:type="getBtnType(d)"
71	:disabled="d.disabled"
72	@click="select(d)"
73	>
74	<span	34✔
75	data-action="select"	34✔
76	:class="{ 'text-muted': month !== d.month }"	34✔
77	>{{ d.date }}</span
78	>
79	</btn>	34✔
80	</td>
81	</tr>
82	</tbody>
83	</table>
84	</template>	34✔
85		34✔
86	<script setup>	34✔
87	import { t } from '../../locale';	238✔
88	import Btn from './../button/Btn.vue';	238✔
89	import { daysInMonth, getWeekNumber } from '../../utils/date.utils';	34✔
90	import { isExist, isFunction } from '../../utils/object.utils';
91	import { computed } from 'vue';
92		34✔
93	const props = defineProps({
94	month: { type: Number, default: undefined },
95	year: { type: Number, default: undefined },
96	date: { type: Date, default: undefined },	34✔
97	today: { type: Date, default: undefined },
98	limit: { type: Object, default: undefined },
99	weekStartsWith: { type: Number, default: undefined },
100	iconControlLeft: { type: String, default: undefined },
101	iconControlRight: { type: String, default: undefined },	123✔
102	dateClass: { type: Function, default: undefined },	2✔
103	yearMonthFormatter: { type: Function, default: undefined },
104	weekNumbers: Boolean,	121✔
105	});
106	const emit = defineEmits([
107	'date-change',
108	'year-change',
109	'month-change',
110	'view-change',
111	]);
112
113	const weekDays = computed(() => {
114	const days = [];
115	let firstDay = props.weekStartsWith;
116	while (days.length < 7) {
117	days.push(firstDay++);
118	if (firstDay > 6) {
119	firstDay = 0;
120	}
121	}
122	return days;	34✔
123	});
124	const yearMonthStr = computed(() => {
125	if (props.yearMonthFormatter) {
126	return props.yearMonthFormatter(props.year, props.month);
127	} else {	123✔
128	return isExist(props.month)	123✔
129	? `${props.year} ${t(`uiv.datePicker.month${props.month + 1}`)}`	123✔
130	: props.year;	123✔
131	}
132	});
133	const monthDayRows = computed(() => {
134	const rows = [];	123✔
135	const firstDay = new Date(props.year, props.month, 1);
136	const prevMonthLastDate = new Date(props.year, props.month, 0).getDate();
137	const startIndex = firstDay.getDay();
138	// console.log(startIndex)
139	const daysNum = daysInMonth(props.month, props.year);	123✔
140	let weekOffset = 0;	123!
141	if (props.weekStartsWith > startIndex) {	×
142	weekOffset = 7 - props.weekStartsWith;
143	} else {	123✔
144	weekOffset = 0 - props.weekStartsWith;
145	}
146	// console.log(prevMonthLastDate, startIndex, daysNum)	123✔
147	for (let i = 0; i < 6; i++) {	738✔
148	rows.push([]);	738✔
149	for (let j = 0 - weekOffset; j < 7 - weekOffset; j++) {	5,166✔
150	const currentIndex = i * 7 + j;	5,166✔
151	const date = { year: props.year, disabled: false };
152	// date in and not in current month
153	if (currentIndex < startIndex) {
154	date.date = prevMonthLastDate - startIndex + currentIndex + 1;
155	if (props.month > 0) {	5,166✔
156	date.month = props.month - 1;	196✔
157	} else {	196✔
158	date.month = 11;	151✔
159	date.year--;
160	}	45✔
161	} else if (currentIndex < startIndex + daysNum) {	45✔
162	date.date = currentIndex - startIndex + 1;
163	date.month = props.month;	4,970✔
164	} else {	3,631✔
165	date.date = currentIndex - startIndex - daysNum + 1;	3,631✔
166	if (props.month < 11) {
167	date.month = props.month + 1;	1,339✔
168	} else {	1,339✔
169	date.month = 0;	1,092✔
170	date.year++;
171	}	247✔
172	}	247✔
173	// process limit dates
174	const dateObj = new Date(date.year, date.month, date.date);
175	let afterFrom = true;
176	let beforeTo = true;	5,166✔
177	if (props.limit?.from) {	5,166✔
178	afterFrom = dateObj >= props.limit.from;	5,166✔
179	}	5,166✔
180	if (props.limit?.to) {	210✔
181	beforeTo = dateObj < props.limit.to;
182	}	5,166✔
183	date.disabled = !afterFrom \|\| !beforeTo;	210✔
184	if (isFunction(props.dateClass)) {
185	date.classes = props.dateClass(dateObj, {	5,166✔
186	currentMonth: props.month,	5,166✔
187	currentYear: props.year,
188	});
189	} else {
190	date.classes = '';
191	}
192	rows[i].push(date);
193	}	84✔
194	}
195	return rows;
196	});
197
198	function tWeekName(index) {	5,082✔
199	return t(`uiv.datePicker.week${index}`);
200	}	5,166✔
201
202	function getBtnType(date) {
203	if (	123✔
204	props.date &&
205	date.date === props.date.getDate() &&
206	date.month === props.date.getMonth() &&	917✔
207	date.year === props.date.getFullYear()
208	) {
209	return 'primary';
210	} else if (
211	date.date === props.today.getDate() &&
212	date.month === props.today.getMonth() &&
213	date.year === props.today.getFullYear()
214	) {
215	return 'info';
216	} else {	5,502✔
217	return 'default';	6✔
218	}	5,496✔
219	}	38✔
220	function select(date) {
221	emit('date-change', date);	5,458✔
222	}
223
224	function goPrevMonth() {
225	let month = props.month;	1✔
226	let year = props.year;
227	if (props.month > 0) {
228	month--;	24✔
229	} else {	24✔
230	month = 11;	24✔
231	year--;	22✔
232	emit('year-change', year);
233	}	2✔
234	emit('month-change', month);	2✔
235	}	2✔
236
237	function goNextMonth() {	24✔
238	let month = props.month;
239	let year = props.year;
240	if (props.month < 11) {	24✔
241	month++;	24✔
242	} else {	24✔
243	month = 0;	22✔
244	year++;
245	emit('year-change', year);	2✔
246	}	2✔
247	emit('month-change', month);	2✔
248	}
249		24✔
250	function changeView() {
251	emit('view-change', 'm');
252	}	2✔
253	</script>

uiv-lib / uiv / 6585028051

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous