@mezzanine-ui/core 0.9.0 → 0.10.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/calendar/calendar.d.ts +2 -7
- package/calendar/index.d.ts +1 -2
- package/calendar/index.js +0 -1
- package/calendar/typings.d.ts +43 -0
- package/calendarMethodsDayjs/index.d.ts +3 -0
- package/calendarMethodsDayjs/index.js +107 -0
- package/calendarMethodsMoment/index.d.ts +3 -0
- package/{calendar/presets/moment.js → calendarMethodsMoment/index.js} +45 -44
- package/package.json +15 -2
- package/picker/picker.d.ts +2 -2
- package/select/_select-styles.scss +30 -19
- package/select/select.d.ts +4 -1
- package/select/select.js +4 -1
- package/table/table.d.ts +1 -0
- package/calendar/presets/moment.d.ts +0 -3
- package/calendar/presets/typings.d.ts +0 -42
package/calendar/calendar.d.ts
CHANGED
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
import { Moment } from 'moment';
|
|
2
1
|
/** Types */
|
|
3
2
|
export declare type CalendarMode = 'year' | 'month' | 'week' | 'day';
|
|
4
|
-
/**
|
|
5
|
-
|
|
6
|
-
* we want `DateType` is given from user, but it will cause compile error now,
|
|
7
|
-
* so we set to Moment as default to fix this problem. (If you have any idea, let me know)
|
|
8
|
-
*/
|
|
9
|
-
export declare type DateType = Moment;
|
|
3
|
+
/** ISO 8601 text */
|
|
4
|
+
export declare type DateType = string;
|
|
10
5
|
/** Classes */
|
|
11
6
|
export declare const calendarPrefix = "mzn-calendar";
|
|
12
7
|
export declare const calendarBoardPrefix: string;
|
package/calendar/index.d.ts
CHANGED
package/calendar/index.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export { CalendarMethods as CalendarMethodsMoment } from './presets/moment.js';
|
|
2
1
|
export { calendarBoardPrefix, calendarButtonPrefix, calendarCellPrefix, calendarClasses, calendarControlsPrefix, calendarMonths, calendarPrefix, calendarRowPrefix, calendarTwelveGridPrefix, calendarYearModuler, calendarYearsBase, getCalendarYearRange, getDefaultModeFormat, getYearRange } from './calendar.js';
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { DateType } from './calendar';
|
|
2
|
+
/** Method Types */
|
|
3
|
+
export declare type CalendarMethods<TDateType = DateType> = {
|
|
4
|
+
/** Get date infos */
|
|
5
|
+
getNow: () => TDateType;
|
|
6
|
+
getSecond: (value: TDateType) => number;
|
|
7
|
+
getMinute: (value: TDateType) => number;
|
|
8
|
+
getHour: (value: TDateType) => number;
|
|
9
|
+
getDate: (value: TDateType) => number;
|
|
10
|
+
getWeekDay: (value: TDateType) => number;
|
|
11
|
+
getMonth: (value: TDateType) => number;
|
|
12
|
+
getYear: (value: TDateType) => number;
|
|
13
|
+
getWeekDayNames: (locale: string) => string[];
|
|
14
|
+
getMonthShortName: (value: number, locale: string) => string;
|
|
15
|
+
getMonthShortNames: (locale: string) => Readonly<string[]>;
|
|
16
|
+
/** Manipulate */
|
|
17
|
+
addDay: (value: TDateType, diff: number) => TDateType;
|
|
18
|
+
addYear: (value: TDateType, diff: number) => TDateType;
|
|
19
|
+
addMonth: (value: TDateType, diff: number) => TDateType;
|
|
20
|
+
setSecond: (value: TDateType, second: number) => TDateType;
|
|
21
|
+
setMinute: (value: TDateType, minute: number) => TDateType;
|
|
22
|
+
setHour: (value: TDateType, hour: number) => TDateType;
|
|
23
|
+
setYear: (value: TDateType, year: number) => TDateType;
|
|
24
|
+
setMonth: (value: TDateType, month: number) => TDateType;
|
|
25
|
+
setDate: (value: TDateType, date: number) => TDateType;
|
|
26
|
+
startOf: (value: TDateType, granularity: any) => TDateType;
|
|
27
|
+
/** Generate day calendar */
|
|
28
|
+
getCalendarGrid: (target: TDateType) => number[][];
|
|
29
|
+
/** Compares */
|
|
30
|
+
isBefore: (target: TDateType, comparison: TDateType) => boolean;
|
|
31
|
+
isBetween: (value: TDateType, target1: TDateType, target2: TDateType, granularity: any) => boolean;
|
|
32
|
+
isSameDate: (dateOne: TDateType, dateTwo: TDateType) => boolean;
|
|
33
|
+
isSameWeek: (dateOne: TDateType, dateTwo: TDateType) => boolean;
|
|
34
|
+
isInMonth: (target: TDateType, month: number) => boolean;
|
|
35
|
+
isDateIncluded: (date: TDateType, targets: TDateType[]) => boolean;
|
|
36
|
+
isWeekIncluded: (firstDateOfWeek: TDateType, targets: TDateType[]) => boolean;
|
|
37
|
+
isMonthIncluded: (date: TDateType, targets: TDateType[]) => boolean;
|
|
38
|
+
isYearIncluded: (date: TDateType, targets: TDateType[]) => boolean;
|
|
39
|
+
/** Format */
|
|
40
|
+
formatToString: (locale: string, date: TDateType, format: string) => string;
|
|
41
|
+
/** Parse */
|
|
42
|
+
parse: (locale: string, text: string, formats: string[]) => TDateType | undefined;
|
|
43
|
+
};
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import dayjs from 'dayjs';
|
|
2
|
+
import weekday from 'dayjs/plugin/weekday';
|
|
3
|
+
import localeData from 'dayjs/plugin/localeData';
|
|
4
|
+
import isBetween from 'dayjs/plugin/isBetween';
|
|
5
|
+
import range from 'lodash/range';
|
|
6
|
+
import chunk from 'lodash/chunk';
|
|
7
|
+
|
|
8
|
+
const localeMappingTable = {
|
|
9
|
+
'en-us': 'en',
|
|
10
|
+
};
|
|
11
|
+
const localeMapping = (locale) => { var _a; return (_a = localeMappingTable[locale]) !== null && _a !== void 0 ? _a : locale; };
|
|
12
|
+
function init() {
|
|
13
|
+
dayjs.extend(weekday);
|
|
14
|
+
dayjs.extend(localeData);
|
|
15
|
+
dayjs.extend(isBetween);
|
|
16
|
+
return true;
|
|
17
|
+
}
|
|
18
|
+
const CalendarMethodsDayjs = {
|
|
19
|
+
/** Get date infos */
|
|
20
|
+
getNow: () => dayjs().toISOString(),
|
|
21
|
+
getSecond: (date) => dayjs(date).second(),
|
|
22
|
+
getMinute: (date) => dayjs(date).minute(),
|
|
23
|
+
getHour: (date) => dayjs(date).hour(),
|
|
24
|
+
getDate: (date) => dayjs(date).date(),
|
|
25
|
+
getWeekDay: (date) => {
|
|
26
|
+
const clone = dayjs(date).locale('en');
|
|
27
|
+
return clone.weekday() + clone.localeData().firstDayOfWeek();
|
|
28
|
+
},
|
|
29
|
+
getMonth: (date) => dayjs(date).month(),
|
|
30
|
+
getYear: (date) => dayjs(date).year(),
|
|
31
|
+
getWeekDayNames: (locale) => {
|
|
32
|
+
return dayjs().locale(localeMapping(locale)).localeData().weekdaysMin();
|
|
33
|
+
},
|
|
34
|
+
getMonthShortName: (month, locale) => {
|
|
35
|
+
const names = CalendarMethodsDayjs.getMonthShortNames(localeMapping(locale));
|
|
36
|
+
return names[month];
|
|
37
|
+
},
|
|
38
|
+
getMonthShortNames: (locale) => {
|
|
39
|
+
return dayjs().locale(localeMapping(locale)).localeData().monthsShort();
|
|
40
|
+
},
|
|
41
|
+
/** Manipulate */
|
|
42
|
+
addDay: (date, diff) => dayjs(date).add(diff, 'day').toISOString(),
|
|
43
|
+
addYear: (date, diff) => dayjs(date).add(diff, 'year').toISOString(),
|
|
44
|
+
addMonth: (date, diff) => dayjs(date).add(diff, 'month').toISOString(),
|
|
45
|
+
setSecond: (date, second) => dayjs(date).second(second).toISOString(),
|
|
46
|
+
setMinute: (date, minute) => dayjs(date).minute(minute).toISOString(),
|
|
47
|
+
setHour: (date, hour) => dayjs(date).hour(hour).toISOString(),
|
|
48
|
+
setMonth: (date, month) => dayjs(date).month(month).toISOString(),
|
|
49
|
+
setYear: (date, year) => dayjs(date).year(year).toISOString(),
|
|
50
|
+
setDate: (date, target) => dayjs(date).date(target).toISOString(),
|
|
51
|
+
startOf: (target, granularity) => dayjs(target).startOf(granularity).toISOString(),
|
|
52
|
+
/** Generate day calendar */
|
|
53
|
+
getCalendarGrid: (target) => {
|
|
54
|
+
const lastDateOfPrevMonth = dayjs(target).subtract(1, 'month').endOf('month')
|
|
55
|
+
.date();
|
|
56
|
+
const firstDayOfCurrentMonth = dayjs(target).date(1).day();
|
|
57
|
+
const lastDateOfCurrentMonth = dayjs(target).endOf('month').date();
|
|
58
|
+
return chunk([
|
|
59
|
+
...range(lastDateOfPrevMonth - firstDayOfCurrentMonth + 1, lastDateOfPrevMonth + 1),
|
|
60
|
+
...range(1, lastDateOfCurrentMonth + 1),
|
|
61
|
+
...range(1, 42 - lastDateOfCurrentMonth - firstDayOfCurrentMonth + 1),
|
|
62
|
+
], 7);
|
|
63
|
+
},
|
|
64
|
+
/** Compares */
|
|
65
|
+
isBefore: (target, comparison) => dayjs(target).isBefore(comparison),
|
|
66
|
+
isBetween: (value, target1, target2, granularity) => dayjs(value).isBetween(target1, target2, granularity),
|
|
67
|
+
isSameDate: (dateOne, dateTwo) => dayjs(dateOne).isSame(dayjs(dateTwo), 'date'),
|
|
68
|
+
isSameWeek: (dateOne, dateTwo) => dayjs(dateOne).isSame(dayjs(dateTwo), 'week'),
|
|
69
|
+
isInMonth: (target, month) => dayjs(target).month() === month,
|
|
70
|
+
isDateIncluded: (date, targets) => targets.some((target) => dayjs(date).isSame(dayjs(target), 'day')),
|
|
71
|
+
isWeekIncluded: (firstDateOfWeek, targets) => targets.some((target) => dayjs(firstDateOfWeek).isSame(dayjs(target), 'week')),
|
|
72
|
+
isMonthIncluded: (date, targets) => targets.some((target) => dayjs(date).isSame(dayjs(target), 'month')),
|
|
73
|
+
isYearIncluded: (date, targets) => targets.some((target) => dayjs(date).isSame(dayjs(target), 'year')),
|
|
74
|
+
/** Format */
|
|
75
|
+
formatToString: (locale, date, format) => {
|
|
76
|
+
const clone = dayjs(date);
|
|
77
|
+
const result = clone.locale(localeMapping(locale));
|
|
78
|
+
return result.format(format);
|
|
79
|
+
},
|
|
80
|
+
/** Parse */
|
|
81
|
+
parse: (locale, text, formats) => {
|
|
82
|
+
for (let i = 0; i < formats.length; i += 1) {
|
|
83
|
+
let format = formats[i];
|
|
84
|
+
let formatText = text;
|
|
85
|
+
if (format.includes('wo') || format.includes('Wo')) {
|
|
86
|
+
format = format.replace(/wo/g, 'w').replace(/Wo/g, 'W');
|
|
87
|
+
const matchFormat = format.match(/[-YyMmDdHhSsWwGg]+/g);
|
|
88
|
+
const matchText = formatText.match(/[-\d]+/g);
|
|
89
|
+
if (matchFormat && matchText) {
|
|
90
|
+
format = matchFormat.join('');
|
|
91
|
+
formatText = matchText.join('');
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
const date = dayjs(formatText, format, localeMapping(locale), true);
|
|
95
|
+
if (date.isValid()) {
|
|
96
|
+
return date.toISOString();
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
return undefined;
|
|
100
|
+
},
|
|
101
|
+
};
|
|
102
|
+
const CalendarMethods = (() => {
|
|
103
|
+
init();
|
|
104
|
+
return CalendarMethodsDayjs;
|
|
105
|
+
})();
|
|
106
|
+
|
|
107
|
+
export { CalendarMethods as default };
|
|
@@ -2,25 +2,25 @@ import moment from 'moment';
|
|
|
2
2
|
import range from 'lodash/range';
|
|
3
3
|
import chunk from 'lodash/chunk';
|
|
4
4
|
|
|
5
|
-
const
|
|
5
|
+
const CalendarMethodsMoment = {
|
|
6
6
|
/** Get date infos */
|
|
7
|
-
getNow: () => moment(),
|
|
8
|
-
getSecond: (date) => date.second(),
|
|
9
|
-
getMinute: (date) => date.minute(),
|
|
10
|
-
getHour: (date) => date.hour(),
|
|
11
|
-
getDate: (date) => date.date(),
|
|
7
|
+
getNow: () => moment().toISOString(),
|
|
8
|
+
getSecond: (date) => moment(date).second(),
|
|
9
|
+
getMinute: (date) => moment(date).minute(),
|
|
10
|
+
getHour: (date) => moment(date).hour(),
|
|
11
|
+
getDate: (date) => moment(date).date(),
|
|
12
12
|
getWeekDay: (date) => {
|
|
13
|
-
const clone = date
|
|
13
|
+
const clone = moment(date).locale('en_US');
|
|
14
14
|
return clone.weekday() + clone.localeData().firstDayOfWeek();
|
|
15
15
|
},
|
|
16
|
-
getMonth: (date) => date.month(),
|
|
17
|
-
getYear: (date) => date.year(),
|
|
16
|
+
getMonth: (date) => moment(date).month(),
|
|
17
|
+
getYear: (date) => moment(date).year(),
|
|
18
18
|
getWeekDayNames: (locale) => {
|
|
19
19
|
const date = moment().locale(locale);
|
|
20
20
|
return date.localeData().weekdaysMin();
|
|
21
21
|
},
|
|
22
22
|
getMonthShortName: (month, locale) => {
|
|
23
|
-
const names =
|
|
23
|
+
const names = CalendarMethodsMoment.getMonthShortNames(locale);
|
|
24
24
|
return names[month];
|
|
25
25
|
},
|
|
26
26
|
getMonthShortNames: (locale) => {
|
|
@@ -29,47 +29,48 @@ const CalendarMethods = {
|
|
|
29
29
|
},
|
|
30
30
|
/** Manipulate */
|
|
31
31
|
addDay: (date, diff) => {
|
|
32
|
-
const clone = date
|
|
33
|
-
return clone.add(diff, 'day');
|
|
32
|
+
const clone = moment(date);
|
|
33
|
+
return clone.add(diff, 'day').toISOString();
|
|
34
34
|
},
|
|
35
35
|
addYear: (date, diff) => {
|
|
36
|
-
const clone = date
|
|
37
|
-
return clone.add(diff, 'year');
|
|
36
|
+
const clone = moment(date);
|
|
37
|
+
return clone.add(diff, 'year').toISOString();
|
|
38
38
|
},
|
|
39
39
|
addMonth: (date, diff) => {
|
|
40
|
-
const clone = date
|
|
41
|
-
return clone.add(diff, 'month');
|
|
40
|
+
const clone = moment(date);
|
|
41
|
+
return clone.add(diff, 'month').toISOString();
|
|
42
42
|
},
|
|
43
43
|
setSecond: (date, second) => {
|
|
44
|
-
const clone = date
|
|
45
|
-
return clone.second(second);
|
|
44
|
+
const clone = moment(date);
|
|
45
|
+
return clone.second(second).toISOString();
|
|
46
46
|
},
|
|
47
47
|
setMinute: (date, minute) => {
|
|
48
|
-
const clone = date
|
|
49
|
-
return clone.minute(minute);
|
|
48
|
+
const clone = moment(date);
|
|
49
|
+
return clone.minute(minute).toISOString();
|
|
50
50
|
},
|
|
51
51
|
setHour: (date, hour) => {
|
|
52
|
-
const clone = date
|
|
53
|
-
return clone.hour(hour);
|
|
52
|
+
const clone = moment(date);
|
|
53
|
+
return clone.hour(hour).toISOString();
|
|
54
54
|
},
|
|
55
55
|
setMonth: (date, month) => {
|
|
56
|
-
const clone = date
|
|
57
|
-
return clone.month(month);
|
|
56
|
+
const clone = moment(date);
|
|
57
|
+
return clone.month(month).toISOString();
|
|
58
58
|
},
|
|
59
59
|
setYear: (date, year) => {
|
|
60
|
-
const clone = date
|
|
61
|
-
return clone.year(year);
|
|
60
|
+
const clone = moment(date);
|
|
61
|
+
return clone.year(year).toISOString();
|
|
62
62
|
},
|
|
63
63
|
setDate: (date, target) => {
|
|
64
|
-
const clone = date
|
|
65
|
-
return clone.date(target);
|
|
64
|
+
const clone = moment(date);
|
|
65
|
+
return clone.date(target).toISOString();
|
|
66
66
|
},
|
|
67
|
-
startOf: (target, granularity) => target.startOf(granularity),
|
|
67
|
+
startOf: (target, granularity) => moment(target).startOf(granularity).toISOString(),
|
|
68
68
|
/** Generate day calendar */
|
|
69
69
|
getCalendarGrid: (target) => {
|
|
70
|
-
const lastDateOfPrevMonth = target
|
|
71
|
-
|
|
72
|
-
const
|
|
70
|
+
const lastDateOfPrevMonth = moment(target).subtract(1, 'month').endOf('month')
|
|
71
|
+
.date();
|
|
72
|
+
const firstDayOfCurrentMonth = moment(target).date(1).day();
|
|
73
|
+
const lastDateOfCurrentMonth = moment(target).endOf('month').date();
|
|
73
74
|
return chunk([
|
|
74
75
|
...range(lastDateOfPrevMonth - firstDayOfCurrentMonth + 1, lastDateOfPrevMonth + 1),
|
|
75
76
|
...range(1, lastDateOfCurrentMonth + 1),
|
|
@@ -77,18 +78,18 @@ const CalendarMethods = {
|
|
|
77
78
|
], 7);
|
|
78
79
|
},
|
|
79
80
|
/** Compares */
|
|
80
|
-
isBefore: (target, comparison) => target.isBefore(comparison),
|
|
81
|
-
isBetween: (value, target1, target2, granularity) => value.isBetween(target1, target2, granularity),
|
|
82
|
-
isSameDate: (dateOne, dateTwo) => dateOne.isSame(dateTwo, 'date'),
|
|
83
|
-
isSameWeek: (dateOne, dateTwo) => dateOne.isSame(dateTwo, 'week'),
|
|
84
|
-
isInMonth: (target, month) => target.month() === month,
|
|
85
|
-
isDateIncluded: (date, targets) => targets.some((target) => date.isSame(target, 'day')),
|
|
86
|
-
isWeekIncluded: (firstDateOfWeek, targets) => targets.some((target) => firstDateOfWeek.isSame(target, 'week')),
|
|
87
|
-
isMonthIncluded: (date, targets) => targets.some((target) => date.isSame(target, 'month')),
|
|
88
|
-
isYearIncluded: (date, targets) => targets.some((target) => date.isSame(target, 'year')),
|
|
81
|
+
isBefore: (target, comparison) => moment(target).isBefore(comparison),
|
|
82
|
+
isBetween: (value, target1, target2, granularity) => moment(value).isBetween(target1, target2, granularity),
|
|
83
|
+
isSameDate: (dateOne, dateTwo) => moment(dateOne).isSame(moment(dateTwo), 'date'),
|
|
84
|
+
isSameWeek: (dateOne, dateTwo) => moment(dateOne).isSame(moment(dateTwo), 'week'),
|
|
85
|
+
isInMonth: (target, month) => moment(target).month() === month,
|
|
86
|
+
isDateIncluded: (date, targets) => targets.some((target) => moment(date).isSame(moment(target), 'day')),
|
|
87
|
+
isWeekIncluded: (firstDateOfWeek, targets) => targets.some((target) => moment(firstDateOfWeek).isSame(moment(target), 'week')),
|
|
88
|
+
isMonthIncluded: (date, targets) => targets.some((target) => moment(date).isSame(moment(target), 'month')),
|
|
89
|
+
isYearIncluded: (date, targets) => targets.some((target) => moment(date).isSame(moment(target), 'year')),
|
|
89
90
|
/** Format */
|
|
90
91
|
formatToString: (locale, date, format) => {
|
|
91
|
-
const clone = date
|
|
92
|
+
const clone = moment(date);
|
|
92
93
|
const result = clone.locale(locale);
|
|
93
94
|
return result.format(format);
|
|
94
95
|
},
|
|
@@ -108,11 +109,11 @@ const CalendarMethods = {
|
|
|
108
109
|
}
|
|
109
110
|
const date = moment(formatText, format, locale, true);
|
|
110
111
|
if (date.isValid()) {
|
|
111
|
-
return date;
|
|
112
|
+
return date.toISOString();
|
|
112
113
|
}
|
|
113
114
|
}
|
|
114
115
|
return undefined;
|
|
115
116
|
},
|
|
116
117
|
};
|
|
117
118
|
|
|
118
|
-
export {
|
|
119
|
+
export { CalendarMethodsMoment as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mezzanine-ui/core",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.2",
|
|
4
4
|
"description": "Core for mezzanine-ui",
|
|
5
5
|
"author": "Mezzanine",
|
|
6
6
|
"repository": {
|
|
@@ -22,8 +22,21 @@
|
|
|
22
22
|
"build": "node ../../scripts/build.js",
|
|
23
23
|
"build:clean": "node ../../scripts/cleanBuild.js"
|
|
24
24
|
},
|
|
25
|
+
"peerDependencies": {
|
|
26
|
+
"dayjs": "^1.10.7",
|
|
27
|
+
"lodash": "^4.17.21",
|
|
28
|
+
"moment": "^2.29.1"
|
|
29
|
+
},
|
|
30
|
+
"peerDependenciesMeta": {
|
|
31
|
+
"moment": {
|
|
32
|
+
"optional": true
|
|
33
|
+
},
|
|
34
|
+
"dayjs": {
|
|
35
|
+
"optional": true
|
|
36
|
+
}
|
|
37
|
+
},
|
|
25
38
|
"dependencies": {
|
|
26
|
-
"@mezzanine-ui/icons": "^0.
|
|
39
|
+
"@mezzanine-ui/icons": "^0.10.2",
|
|
27
40
|
"@mezzanine-ui/system": "^0.7.0",
|
|
28
41
|
"tslib": "^2.1.0"
|
|
29
42
|
}
|
package/picker/picker.d.ts
CHANGED
|
@@ -6,5 +6,5 @@ export declare const pickerClasses: {
|
|
|
6
6
|
readonly arrowIcon: "mzn-picker__arrow-icon";
|
|
7
7
|
};
|
|
8
8
|
/** Types */
|
|
9
|
-
export declare type RangePickerValue = undefined[] | [
|
|
10
|
-
export declare type RangePickerPickingValue = RangePickerValue | [
|
|
9
|
+
export declare type RangePickerValue<T = DateType> = undefined[] | [T, T];
|
|
10
|
+
export declare type RangePickerPickingValue<T = DateType> = RangePickerValue | [T] | [undefined, T] | [T, undefined];
|
|
@@ -12,6 +12,7 @@ $tags-gap: 4px !default;
|
|
|
12
12
|
|
|
13
13
|
.#{$prefix} {
|
|
14
14
|
position: relative;
|
|
15
|
+
overflow: hidden;
|
|
15
16
|
|
|
16
17
|
&--full-width {
|
|
17
18
|
width: 100%;
|
|
@@ -48,16 +49,37 @@ $tags-gap: 4px !default;
|
|
|
48
49
|
}
|
|
49
50
|
}
|
|
50
51
|
|
|
52
|
+
&__tags-input-wrapper {
|
|
53
|
+
width: 100%;
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
justify-content: flex-start;
|
|
57
|
+
flex-wrap: wrap;
|
|
58
|
+
|
|
59
|
+
&--ellipsis {
|
|
60
|
+
flex-wrap: unset;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&__tags-input {
|
|
65
|
+
flex: 1;
|
|
66
|
+
min-width: 30%;
|
|
67
|
+
}
|
|
68
|
+
|
|
51
69
|
&__tags {
|
|
52
70
|
padding-top: $tags-container-padding;
|
|
53
71
|
padding-left: $tags-container-padding;
|
|
54
|
-
width:
|
|
72
|
+
width: auto;
|
|
55
73
|
max-width: calc(100% - var(--#{text-field.$prefix}-prefix-x-gap) - var(--#{text-field.$prefix}-icon-size));
|
|
56
74
|
display: flex;
|
|
57
75
|
flex-flow: row wrap;
|
|
58
76
|
align-items: center;
|
|
59
77
|
justify-self: flex-start;
|
|
60
78
|
|
|
79
|
+
&--ellipsis {
|
|
80
|
+
flex-wrap: unset;
|
|
81
|
+
}
|
|
82
|
+
|
|
61
83
|
> span {
|
|
62
84
|
margin-right: $tags-gap;
|
|
63
85
|
margin-bottom: $tags-gap;
|
|
@@ -93,37 +115,26 @@ $tags-gap: 4px !default;
|
|
|
93
115
|
.#{$autocomplete-prefix} {
|
|
94
116
|
width: 100%;
|
|
95
117
|
height: 32px;
|
|
96
|
-
|
|
97
|
-
|
|
118
|
+
padding: 0 12px 0 16px;
|
|
119
|
+
border: none;
|
|
98
120
|
display: flex;
|
|
99
121
|
align-items: center;
|
|
100
122
|
justify-content: flex-start;
|
|
101
123
|
background-color: palette.color(bg);
|
|
102
124
|
box-sizing: border-box;
|
|
125
|
+
text-align: left;
|
|
126
|
+
cursor: pointer;
|
|
103
127
|
|
|
104
|
-
|
|
128
|
+
p {
|
|
105
129
|
flex: 1;
|
|
106
|
-
|
|
107
|
-
padding: 0;
|
|
108
|
-
outline: none;
|
|
130
|
+
margin: 0;
|
|
109
131
|
color: palette.color(text-primary);
|
|
110
|
-
background-color: transparent;
|
|
111
132
|
|
|
112
133
|
@include typography.variant(input2);
|
|
113
|
-
|
|
114
|
-
&::placeholder {
|
|
115
|
-
color: palette.color(action-inactive);
|
|
116
|
-
}
|
|
117
134
|
}
|
|
118
135
|
|
|
119
136
|
&__icon {
|
|
120
137
|
font-size: 24px;
|
|
121
|
-
color: palette.color(
|
|
122
|
-
cursor: default;
|
|
123
|
-
|
|
124
|
-
&--active {
|
|
125
|
-
color: palette.color(primary);
|
|
126
|
-
cursor: pointer;
|
|
127
|
-
}
|
|
138
|
+
color: palette.color(text-secondary);
|
|
128
139
|
}
|
|
129
140
|
}
|
package/select/select.d.ts
CHANGED
|
@@ -12,7 +12,11 @@ export declare const selectClasses: {
|
|
|
12
12
|
readonly hostFullWidth: "mzn-select--full-width";
|
|
13
13
|
/** Trigger classes */
|
|
14
14
|
readonly trigger: string;
|
|
15
|
+
readonly triggerTagsInputWrapper: `${string}__tags-input-wrapper`;
|
|
16
|
+
readonly triggerTagsInputWrapperEllipsis: `${string}__tags-input-wrapper--ellipsis`;
|
|
17
|
+
readonly triggerTagsInput: `${string}__tags-input`;
|
|
15
18
|
readonly triggerTags: `${string}__tags`;
|
|
19
|
+
readonly triggerTagsEllipsis: `${string}__tags--ellipsis`;
|
|
16
20
|
readonly triggerSuffixActionIcon: `${string}__suffix-action-icon`;
|
|
17
21
|
readonly triggerSuffixActionIconActive: `${string}__suffix-action-icon--active`;
|
|
18
22
|
/** Popper classes */
|
|
@@ -23,5 +27,4 @@ export declare const selectClasses: {
|
|
|
23
27
|
/** AutoComplete classes */
|
|
24
28
|
readonly autoComplete: string;
|
|
25
29
|
readonly autoCompleteIcon: `${string}__icon`;
|
|
26
|
-
readonly autoCompleteIconActive: `${string}__icon--active`;
|
|
27
30
|
};
|
package/select/select.js
CHANGED
|
@@ -9,7 +9,11 @@ const selectClasses = {
|
|
|
9
9
|
hostFullWidth: `${selectPrefix}--full-width`,
|
|
10
10
|
/** Trigger classes */
|
|
11
11
|
trigger: selectTriggerPrefix,
|
|
12
|
+
triggerTagsInputWrapper: `${selectTriggerPrefix}__tags-input-wrapper`,
|
|
13
|
+
triggerTagsInputWrapperEllipsis: `${selectTriggerPrefix}__tags-input-wrapper--ellipsis`,
|
|
14
|
+
triggerTagsInput: `${selectTriggerPrefix}__tags-input`,
|
|
12
15
|
triggerTags: `${selectTriggerPrefix}__tags`,
|
|
16
|
+
triggerTagsEllipsis: `${selectTriggerPrefix}__tags--ellipsis`,
|
|
13
17
|
triggerSuffixActionIcon: `${selectTriggerPrefix}__suffix-action-icon`,
|
|
14
18
|
triggerSuffixActionIconActive: `${selectTriggerPrefix}__suffix-action-icon--active`,
|
|
15
19
|
/** Popper classes */
|
|
@@ -20,7 +24,6 @@ const selectClasses = {
|
|
|
20
24
|
/** AutoComplete classes */
|
|
21
25
|
autoComplete: autoCompletePrefix,
|
|
22
26
|
autoCompleteIcon: `${autoCompletePrefix}__icon`,
|
|
23
|
-
autoCompleteIconActive: `${autoCompletePrefix}__icon--active`,
|
|
24
27
|
};
|
|
25
28
|
|
|
26
29
|
export { autoCompletePrefix, selectClasses, selectPopperPrefix, selectPrefix, selectTreePrefix, selectTriggerPrefix, treeSelectPrefix };
|
package/table/table.d.ts
CHANGED
|
@@ -77,6 +77,7 @@ export interface TableExpandable<SourceType> {
|
|
|
77
77
|
expandedRowRender(record: SourceType): string | {
|
|
78
78
|
dataSource: TableDataSource[];
|
|
79
79
|
columns?: ExpandedTableColumn[];
|
|
80
|
+
className?: string;
|
|
80
81
|
};
|
|
81
82
|
rowExpandable?(record: SourceType): boolean;
|
|
82
83
|
onExpand?(record: SourceType, status: boolean): void;
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
/** Method Types */
|
|
2
|
-
export declare type CalendarMethods<DateType> = {
|
|
3
|
-
/** Get date infos */
|
|
4
|
-
getNow: () => DateType;
|
|
5
|
-
getSecond: (value: DateType) => number;
|
|
6
|
-
getMinute: (value: DateType) => number;
|
|
7
|
-
getHour: (value: DateType) => number;
|
|
8
|
-
getDate: (value: DateType) => number;
|
|
9
|
-
getWeekDay: (value: DateType) => number;
|
|
10
|
-
getMonth: (value: DateType) => number;
|
|
11
|
-
getYear: (value: DateType) => number;
|
|
12
|
-
getWeekDayNames: (locale: string) => string[];
|
|
13
|
-
getMonthShortName: (value: number, locale: string) => string;
|
|
14
|
-
getMonthShortNames: (locale: string) => Readonly<string[]>;
|
|
15
|
-
/** Manipulate */
|
|
16
|
-
addDay: (value: DateType, diff: number) => DateType;
|
|
17
|
-
addYear: (value: DateType, diff: number) => DateType;
|
|
18
|
-
addMonth: (value: DateType, diff: number) => DateType;
|
|
19
|
-
setSecond: (value: DateType, second: number) => DateType;
|
|
20
|
-
setMinute: (value: DateType, minute: number) => DateType;
|
|
21
|
-
setHour: (value: DateType, hour: number) => DateType;
|
|
22
|
-
setYear: (value: DateType, year: number) => DateType;
|
|
23
|
-
setMonth: (value: DateType, month: number) => DateType;
|
|
24
|
-
setDate: (value: DateType, date: number) => DateType;
|
|
25
|
-
startOf: (value: DateType, granularity: any) => DateType;
|
|
26
|
-
/** Generate day calendar */
|
|
27
|
-
getCalendarGrid: (target: DateType) => number[][];
|
|
28
|
-
/** Compares */
|
|
29
|
-
isBefore: (target: DateType, comparison: DateType) => boolean;
|
|
30
|
-
isBetween: (value: DateType, target1: DateType, target2: DateType, granularity: any) => boolean;
|
|
31
|
-
isSameDate: (dateOne: DateType, dateTwo: DateType) => boolean;
|
|
32
|
-
isSameWeek: (dateOne: DateType, dateTwo: DateType) => boolean;
|
|
33
|
-
isInMonth: (target: DateType, month: number) => boolean;
|
|
34
|
-
isDateIncluded: (date: DateType, targets: DateType[]) => boolean;
|
|
35
|
-
isWeekIncluded: (firstDateOfWeek: DateType, targets: DateType[]) => boolean;
|
|
36
|
-
isMonthIncluded: (date: DateType, targets: DateType[]) => boolean;
|
|
37
|
-
isYearIncluded: (date: DateType, targets: DateType[]) => boolean;
|
|
38
|
-
/** Format */
|
|
39
|
-
formatToString: (locale: string, date: DateType, format: string) => string;
|
|
40
|
-
/** Parse */
|
|
41
|
-
parse: (locale: string, text: string, formats: string[]) => DateType | undefined;
|
|
42
|
-
};
|