@operato/event-view 10.0.0 → 10.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/CHANGELOG.md +10 -0
- package/coverage/lcov-report/base.css +224 -0
- package/coverage/lcov-report/block-navigation.js +87 -0
- package/coverage/lcov-report/calendar-monthly-styles.ts.html +466 -0
- package/coverage/lcov-report/calendar-monthly.ts.html +769 -0
- package/coverage/lcov-report/calendar-weekly-styles.ts.html +508 -0
- package/coverage/lcov-report/calendar-weekly.ts.html +739 -0
- package/coverage/lcov-report/favicon.png +0 -0
- package/coverage/lcov-report/index.html +131 -0
- package/coverage/lcov-report/ox-event-view.ts.html +280 -0
- package/coverage/lcov-report/prettify.css +1 -0
- package/coverage/lcov-report/prettify.js +2 -0
- package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
- package/coverage/lcov-report/sorter.js +210 -0
- package/coverage/lcov-report/types.ts.html +199 -0
- package/coverage/lcov.info +3378 -0
- package/dist/src/calendar-monthly-styles.js +22 -8
- package/dist/src/calendar-monthly-styles.js.map +1 -1
- package/dist/src/calendar-weekly-styles.js +41 -13
- package/dist/src/calendar-weekly-styles.js.map +1 -1
- package/dist/src/ox-event-view.d.ts +15 -1
- package/dist/src/ox-event-view.js +42 -15
- package/dist/src/ox-event-view.js.map +1 -1
- package/dist/test/calendar-layout.test.d.ts +1 -0
- package/dist/test/calendar-layout.test.js +86 -0
- package/dist/test/calendar-layout.test.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -2
- package/test/calendar-layout.test.ts +108 -0
|
@@ -13,7 +13,8 @@ export const CalendarMonthlyStyles = css `
|
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
[this-month] {
|
|
16
|
-
|
|
16
|
+
/* Was the x-large keyword, which is a browser step, not a step of this theme. */
|
|
17
|
+
font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
[nav] {
|
|
@@ -33,15 +34,27 @@ export const CalendarMonthlyStyles = css `
|
|
|
33
34
|
|
|
34
35
|
padding: 0;
|
|
35
36
|
margin: var(--calendar-monthly-ol-margin, 9px 0);
|
|
36
|
-
border-top: var(--calendar-monthly-ol-top-border, 3px solid #999);
|
|
37
|
-
}
|
|
38
|
-
|
|
37
|
+
border-top: var(--calendar-monthly-ol-top-border, 3px solid var(--md-sys-color-outline, #999));
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/*
|
|
41
|
+
* The seven tracks are 1fr, and 1fr's minimum is min-content — so a cell whose chip is
|
|
42
|
+
* white-space: nowrap pushes its own track wide and squeezes the rest.
|
|
43
|
+
*
|
|
44
|
+
* Measured at 700px with one long title: li widths came out
|
|
45
|
+
* [58, 58, 353, 58, 58, 58, 58] without min-width: 0
|
|
46
|
+
* [100 × 7] with it
|
|
47
|
+
*
|
|
48
|
+
* The host page had already asked for text-overflow: ellipsis on that chip, and it never
|
|
49
|
+
* ran: the track grew instead of the text being clipped. [확인함] 2026-09-07
|
|
50
|
+
*/
|
|
39
51
|
li {
|
|
40
52
|
position: relative;
|
|
53
|
+
min-width: 0;
|
|
41
54
|
|
|
42
55
|
min-height: 10%;
|
|
43
56
|
list-style: none;
|
|
44
|
-
border: var(--calendar-monthly-border, 1px solid rgba(0, 0, 0, 0.1));
|
|
57
|
+
border: var(--calendar-monthly-border, 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.1)));
|
|
45
58
|
border-width: var(--calendar-monthly-border-width, 0 1px 1px 0px);
|
|
46
59
|
opacity: var(--calendar-monthly-opacity);
|
|
47
60
|
|
|
@@ -84,17 +97,18 @@ export const CalendarMonthlyStyles = css `
|
|
|
84
97
|
|
|
85
98
|
li[today] > span[date-label] {
|
|
86
99
|
display: inline-block;
|
|
87
|
-
background-color: var(--calendar-monthly-date-label-background-color, #cc3300);
|
|
100
|
+
background-color: var(--calendar-monthly-date-label-background-color, var(--md-sys-color-error, #cc3300));
|
|
88
101
|
padding: var(--calendar-monthly-date-label-padding);
|
|
89
102
|
border-radius: var(--calendar-monthly-date-label-border-radius, 999em);
|
|
90
|
-
color: var(--calendar-monthly-date-label-color, #fff);
|
|
103
|
+
color: var(--calendar-monthly-date-label-color, var(--md-sys-color-on-error, #fff));
|
|
91
104
|
min-width: 16px;
|
|
92
105
|
text-align: center;
|
|
93
106
|
}
|
|
94
107
|
|
|
95
108
|
[date] div {
|
|
96
109
|
display: block;
|
|
97
|
-
|
|
110
|
+
/* Was the small keyword. */
|
|
111
|
+
font-size: var(--md-sys-typescale-body-small-size, 0.75rem);
|
|
98
112
|
}
|
|
99
113
|
|
|
100
114
|
[event] {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar-monthly-styles.js","sourceRoot":"","sources":["../../src/calendar-monthly-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"calendar-monthly-styles.js","sourceRoot":"","sources":["../../src/calendar-monthly-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HvC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const CalendarMonthlyStyles = css`\n :host {\n display: flex;\n flex-direction: column;\n\n --md-text-button-container-height: 24px;\n }\n\n [head] {\n display: flex;\n align-items: center;\n }\n\n [this-month] {\n /* Was the x-large keyword, which is a browser step, not a step of this theme. */\n font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);\n }\n\n [nav] {\n margin-left: auto;\n }\n\n ::slotted(*) {\n color: var(--md-sys-color-secondary);\n }\n\n ol {\n flex: 1;\n\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n grid-template-rows: max-content;\n\n padding: 0;\n margin: var(--calendar-monthly-ol-margin, 9px 0);\n border-top: var(--calendar-monthly-ol-top-border, 3px solid var(--md-sys-color-outline, #999));\n }\n\n /*\n * The seven tracks are 1fr, and 1fr's minimum is min-content — so a cell whose chip is\n * white-space: nowrap pushes its own track wide and squeezes the rest.\n *\n * Measured at 700px with one long title: li widths came out\n * [58, 58, 353, 58, 58, 58, 58] without min-width: 0\n * [100 × 7] with it\n *\n * The host page had already asked for text-overflow: ellipsis on that chip, and it never\n * ran: the track grew instead of the text being clipped. [확인함] 2026-09-07\n */\n li {\n position: relative;\n min-width: 0;\n\n min-height: 10%;\n list-style: none;\n border: var(--calendar-monthly-border, 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.1)));\n border-width: var(--calendar-monthly-border-width, 0 1px 1px 0px);\n opacity: var(--calendar-monthly-opacity);\n\n user-select: none;\n touch-action: none;\n }\n\n li:nth-child(7n + 1) {\n border-left-width: 1px;\n }\n\n li[day-of-week] {\n opacity: 1;\n background-color: var(--calendar-current-week-background-color, var(--md-sys-color-surface-variant));\n color: var(--calendar-current-week-color, var(--md-sys-color-on-surface));\n padding: var(--calendar-monthly-label-padding);\n text-align: center;\n }\n\n li[current-month] {\n background-color: var(--calendar-current-month-background-color, var(--md-sys-color-surface-variant));\n color: var(--calendar-current-month-color, var(--md-sys-color-on-surface-variant));\n opacity: 1;\n }\n\n li[selected] {\n background-color: var(--calendar-monthly-selected-background-color, var(--md-sys-color-tertiary-container));\n color: var(--calendar-monthly-selected-color, var(--md-sys-color-on-tertiary-container));\n }\n\n li[date] {\n min-height: var(--calendar-monthly-date-min-height, 120px);\n }\n\n span[date-label] {\n display: block;\n margin: var(--calendar-monthly-date-label-margin);\n text-align: var(--calendar-monthly-label-align, left);\n }\n\n li[today] > span[date-label] {\n display: inline-block;\n background-color: var(--calendar-monthly-date-label-background-color, var(--md-sys-color-error, #cc3300));\n padding: var(--calendar-monthly-date-label-padding);\n border-radius: var(--calendar-monthly-date-label-border-radius, 999em);\n color: var(--calendar-monthly-date-label-color, var(--md-sys-color-on-error, #fff));\n min-width: 16px;\n text-align: center;\n }\n\n [date] div {\n display: block;\n /* Was the small keyword. */\n font-size: var(--md-sys-typescale-body-small-size, 0.75rem);\n }\n\n [event] {\n display: block;\n background-color: var(--calendar-monthly-background-color);\n color: var(--calendar-monthly-color);\n border: var(--calendar-monthly-event-border);\n border-width: var(--calendar-monthly-event-border-width);\n margin: var(--calendar-monthly-event-margin, 0 0 4px 0);\n padding: var(--calendar-monthly-event-padding, 2px 4px 2px 4px);\n\n user-select: all;\n touch-action: all;\n }\n`\n"]}
|
|
@@ -3,10 +3,9 @@ export const CalendarWeeklyStyles = css `
|
|
|
3
3
|
:host {
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: column;
|
|
6
|
-
color: var(--calendar-weekly-text-color, #585858);
|
|
6
|
+
color: var(--calendar-weekly-text-color, var(--md-sys-color-on-surface-variant, #585858));
|
|
7
7
|
|
|
8
8
|
--md-text-button-container-height: 24px;
|
|
9
|
-
--md-sys-color-primary: rgba(var(--secondary-color-rgb), 0.8);
|
|
10
9
|
}
|
|
11
10
|
|
|
12
11
|
[head] {
|
|
@@ -16,19 +15,35 @@ export const CalendarWeeklyStyles = css `
|
|
|
16
15
|
|
|
17
16
|
[head-week] {
|
|
18
17
|
display: flex;
|
|
19
|
-
align-items
|
|
18
|
+
/* left is not a value align-items accepts — the rule did nothing. */
|
|
19
|
+
align-items: flex-start;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
[this-week] {
|
|
23
|
-
|
|
23
|
+
/* Was the x-large keyword, which is a browser step, not a step of this theme. */
|
|
24
|
+
font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);
|
|
24
25
|
}
|
|
25
26
|
|
|
26
27
|
[nav] {
|
|
27
28
|
margin-left: auto;
|
|
28
29
|
}
|
|
29
30
|
|
|
31
|
+
/*
|
|
32
|
+
* Same token the monthly view uses for its slotted switch.
|
|
33
|
+
*
|
|
34
|
+
* This used to override --md-sys-color-primary inside the component with
|
|
35
|
+
* rgba(var(--secondary-color-rgb), 0.8), which never produced a color:
|
|
36
|
+
*
|
|
37
|
+
* host does not define --secondary-color-rgb the token resolves to empty, so nothing
|
|
38
|
+
* reading it gets a color at all
|
|
39
|
+
* host defines it as "12 34 56" rgba(12 34 56, 0.8) mixes space-separated
|
|
40
|
+
* channels into the comma syntax — invalid,
|
|
41
|
+
* and the property falls back to black
|
|
42
|
+
*
|
|
43
|
+
* [확인함] 2026-09-07 · both cases measured in a browser
|
|
44
|
+
*/
|
|
30
45
|
::slotted(*) {
|
|
31
|
-
color: var(--md-sys-color-
|
|
46
|
+
color: var(--md-sys-color-secondary);
|
|
32
47
|
}
|
|
33
48
|
|
|
34
49
|
ol {
|
|
@@ -40,14 +55,26 @@ export const CalendarWeeklyStyles = css `
|
|
|
40
55
|
|
|
41
56
|
padding: 0;
|
|
42
57
|
margin: var(--calendar-weekly-ol-margin, 9px 0);
|
|
43
|
-
border-top: var(--calendar-weekly-ol-top-border, 3px solid #999);
|
|
44
|
-
}
|
|
45
|
-
|
|
58
|
+
border-top: var(--calendar-weekly-ol-top-border, 3px solid var(--md-sys-color-outline, #999));
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/*
|
|
62
|
+
* The seven tracks are 1fr, and 1fr's minimum is min-content — so a cell whose chip is
|
|
63
|
+
* white-space: nowrap pushes its own track wide and squeezes the rest.
|
|
64
|
+
*
|
|
65
|
+
* Measured at 700px with one long title: li widths came out
|
|
66
|
+
* [58, 58, 353, 58, 58, 58, 58] without min-width: 0
|
|
67
|
+
* [100 × 7] with it
|
|
68
|
+
*
|
|
69
|
+
* The host page had already asked for text-overflow: ellipsis on that chip, and it never
|
|
70
|
+
* ran: the track grew instead of the text being clipped. [확인함] 2026-09-07
|
|
71
|
+
*/
|
|
46
72
|
li {
|
|
47
73
|
position: relative;
|
|
74
|
+
min-width: 0;
|
|
48
75
|
|
|
49
76
|
list-style: none;
|
|
50
|
-
border: var(--calendar-weekly-border, 1px solid rgba(0, 0, 0, 0.1));
|
|
77
|
+
border: var(--calendar-weekly-border, 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.1)));
|
|
51
78
|
border-width: var(--calendar-weekly-border-width, 0 1px 1px 0px);
|
|
52
79
|
opacity: var(--calendar-weekly-opacity);
|
|
53
80
|
|
|
@@ -68,7 +95,7 @@ export const CalendarWeeklyStyles = css `
|
|
|
68
95
|
}
|
|
69
96
|
|
|
70
97
|
li[current-week] {
|
|
71
|
-
background-color: var(--calendar-current-week-background-color, #fff);
|
|
98
|
+
background-color: var(--calendar-current-week-background-color, var(--md-sys-color-surface, #fff));
|
|
72
99
|
opacity: 1;
|
|
73
100
|
}
|
|
74
101
|
|
|
@@ -85,17 +112,18 @@ export const CalendarWeeklyStyles = css `
|
|
|
85
112
|
|
|
86
113
|
li[today] > span[date-label] {
|
|
87
114
|
display: inline-block;
|
|
88
|
-
background-color: var(--calendar-weekly-date-label-background-color, #cc3300);
|
|
115
|
+
background-color: var(--calendar-weekly-date-label-background-color, var(--md-sys-color-error, #cc3300));
|
|
89
116
|
padding: var(--calendar-weekly-date-label-padding);
|
|
90
117
|
border-radius: var(--calendar-weekly-date-label-border-radius, 999em);
|
|
91
|
-
color: var(--calendar-weekly-date-label-color, #fff);
|
|
118
|
+
color: var(--calendar-weekly-date-label-color, var(--md-sys-color-on-error, #fff));
|
|
92
119
|
min-width: 16px;
|
|
93
120
|
text-align: center;
|
|
94
121
|
}
|
|
95
122
|
|
|
96
123
|
[date] div {
|
|
97
124
|
display: block;
|
|
98
|
-
|
|
125
|
+
/* Was the small keyword. */
|
|
126
|
+
font-size: var(--md-sys-typescale-body-small-size, 0.75rem);
|
|
99
127
|
}
|
|
100
128
|
|
|
101
129
|
[event] {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar-weekly-styles.js","sourceRoot":"","sources":["../../src/calendar-weekly-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"calendar-weekly-styles.js","sourceRoot":"","sources":["../../src/calendar-weekly-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ItC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const CalendarWeeklyStyles = css`\n :host {\n display: flex;\n flex-direction: column;\n color: var(--calendar-weekly-text-color, var(--md-sys-color-on-surface-variant, #585858));\n\n --md-text-button-container-height: 24px;\n }\n\n [head] {\n display: flex;\n align-items: center;\n }\n\n [head-week] {\n display: flex;\n /* left is not a value align-items accepts — the rule did nothing. */\n align-items: flex-start;\n }\n\n [this-week] {\n /* Was the x-large keyword, which is a browser step, not a step of this theme. */\n font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);\n }\n\n [nav] {\n margin-left: auto;\n }\n\n /*\n * Same token the monthly view uses for its slotted switch.\n *\n * This used to override --md-sys-color-primary inside the component with\n * rgba(var(--secondary-color-rgb), 0.8), which never produced a color:\n *\n * host does not define --secondary-color-rgb the token resolves to empty, so nothing\n * reading it gets a color at all\n * host defines it as \"12 34 56\" rgba(12 34 56, 0.8) mixes space-separated\n * channels into the comma syntax — invalid,\n * and the property falls back to black\n *\n * [확인함] 2026-09-07 · both cases measured in a browser\n */\n ::slotted(*) {\n color: var(--md-sys-color-secondary);\n }\n\n ol {\n flex: 1;\n\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n grid-template-rows: max-content;\n\n padding: 0;\n margin: var(--calendar-weekly-ol-margin, 9px 0);\n border-top: var(--calendar-weekly-ol-top-border, 3px solid var(--md-sys-color-outline, #999));\n }\n\n /*\n * The seven tracks are 1fr, and 1fr's minimum is min-content — so a cell whose chip is\n * white-space: nowrap pushes its own track wide and squeezes the rest.\n *\n * Measured at 700px with one long title: li widths came out\n * [58, 58, 353, 58, 58, 58, 58] without min-width: 0\n * [100 × 7] with it\n *\n * The host page had already asked for text-overflow: ellipsis on that chip, and it never\n * ran: the track grew instead of the text being clipped. [확인함] 2026-09-07\n */\n li {\n position: relative;\n min-width: 0;\n\n list-style: none;\n border: var(--calendar-weekly-border, 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.1)));\n border-width: var(--calendar-weekly-border-width, 0 1px 1px 0px);\n opacity: var(--calendar-weekly-opacity);\n\n user-select: none;\n touch-action: none;\n }\n\n li:nth-child(7n + 1) {\n border-left-width: 1px;\n }\n\n li[day-of-week] {\n opacity: 1;\n background-color: var(--calendar-current-week-background-color, var(--md-sys-color-surface-variant));\n color: var(--calendar-current-week-color, var(--md-sys-color-on-surface));\n padding: var(--calendar-weekly-label-padding);\n text-align: center;\n }\n\n li[current-week] {\n background-color: var(--calendar-current-week-background-color, var(--md-sys-color-surface, #fff));\n opacity: 1;\n }\n\n li[selected] {\n background-color: var(--calendar-weekly-selected-background-color, var(--md-sys-color-tertiary-container));\n color: var(--calendar-weekly-selected-color, var(--md-sys-color-on-tertiary-container));\n }\n\n span[date-label] {\n display: block;\n margin: var(--calendar-weekly-date-label-margin);\n text-align: var(--calendar-weekly-label-align, center);\n }\n\n li[today] > span[date-label] {\n display: inline-block;\n background-color: var(--calendar-weekly-date-label-background-color, var(--md-sys-color-error, #cc3300));\n padding: var(--calendar-weekly-date-label-padding);\n border-radius: var(--calendar-weekly-date-label-border-radius, 999em);\n color: var(--calendar-weekly-date-label-color, var(--md-sys-color-on-error, #fff));\n min-width: 16px;\n text-align: center;\n }\n\n [date] div {\n display: block;\n /* Was the small keyword. */\n font-size: var(--md-sys-typescale-body-small-size, 0.75rem);\n }\n\n [event] {\n display: block;\n background-color: var(--calendar-weekly-background-color);\n border: var(--calendar-weekly-event-border);\n border-width: var(--calendar-weekly-event-border-width);\n margin: var(--calendar-weekly-event-margin, 0 0 4px 0);\n padding: var(--calendar-weekly-event-padding, 2px 4px 2px 4px);\n\n user-select: all;\n touch-action: all;\n }\n`\n"]}
|
|
@@ -4,8 +4,22 @@ import './calendar-weekly.js';
|
|
|
4
4
|
import { LitElement } from 'lit';
|
|
5
5
|
import { EventProvider } from './types.js';
|
|
6
6
|
export declare class OxEventView extends LitElement {
|
|
7
|
-
static styles: import("lit").CSSResult;
|
|
7
|
+
static styles: import("lit").CSSResult[];
|
|
8
8
|
mode: 'monthly' | 'weekly';
|
|
9
9
|
eventProvider?: EventProvider;
|
|
10
|
+
/**
|
|
11
|
+
* Switch view, and tell the host.
|
|
12
|
+
*
|
|
13
|
+
* There are two switches for one piece of state: the icon in here, and whatever the host page
|
|
14
|
+
* puts on its own toolbar. Without the event the host never learns that the icon was used, and
|
|
15
|
+
* anything it derives from the mode goes stale.
|
|
16
|
+
*
|
|
17
|
+
* What that cost on screen: the factory calendar slices each day to a per-view maximum (4 in
|
|
18
|
+
* monthly, 32 in weekly). Switching by this icon left the host on monthly, so a weekly cell
|
|
19
|
+
* over 1000px tall showed four rows and "+56 more". [확인함] 2026-09-07
|
|
20
|
+
*
|
|
21
|
+
* The mode still changes here, so a host that ignores the event keeps working on its own.
|
|
22
|
+
*/
|
|
23
|
+
private switchTo;
|
|
10
24
|
render(): import("lit-html").TemplateResult<1>;
|
|
11
25
|
}
|
|
@@ -4,38 +4,65 @@ import './calendar-monthly.js';
|
|
|
4
4
|
import './calendar-weekly.js';
|
|
5
5
|
import { css, html, LitElement } from 'lit';
|
|
6
6
|
import { customElement, property } from 'lit/decorators.js';
|
|
7
|
+
import { ScrollbarStyles } from '@operato/styles';
|
|
7
8
|
let OxEventView = class OxEventView extends LitElement {
|
|
8
9
|
constructor() {
|
|
9
10
|
super(...arguments);
|
|
10
11
|
this.mode = 'monthly';
|
|
11
12
|
}
|
|
12
|
-
static { this.styles =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
static { this.styles = [
|
|
14
|
+
/*
|
|
15
|
+
* The host page is the one that decides this element scrolls — operato-plant sets
|
|
16
|
+
* overflow: auto on it. A rule written here still reaches that scrollbar: measured in
|
|
17
|
+
* Chrome, :host::-webkit-scrollbar from inside the shadow root gives the same 5px as the
|
|
18
|
+
* identical rule written on the outer page. [확인함] 2026-09-07
|
|
19
|
+
*/
|
|
20
|
+
ScrollbarStyles,
|
|
21
|
+
css `
|
|
22
|
+
:host {
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-direction: column;
|
|
16
25
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
26
|
+
background-color: var(--md-sys-color-background);
|
|
27
|
+
color: var(--md-sys-color-on-background);
|
|
28
|
+
}
|
|
20
29
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
30
|
+
calendar-weekly,
|
|
31
|
+
calendar-monthly {
|
|
32
|
+
flex: 1;
|
|
24
33
|
|
|
25
|
-
|
|
26
|
-
|
|
34
|
+
padding: 0;
|
|
35
|
+
margin: 0;
|
|
36
|
+
}
|
|
37
|
+
`
|
|
38
|
+
]; }
|
|
39
|
+
/**
|
|
40
|
+
* Switch view, and tell the host.
|
|
41
|
+
*
|
|
42
|
+
* There are two switches for one piece of state: the icon in here, and whatever the host page
|
|
43
|
+
* puts on its own toolbar. Without the event the host never learns that the icon was used, and
|
|
44
|
+
* anything it derives from the mode goes stale.
|
|
45
|
+
*
|
|
46
|
+
* What that cost on screen: the factory calendar slices each day to a per-view maximum (4 in
|
|
47
|
+
* monthly, 32 in weekly). Switching by this icon left the host on monthly, so a weekly cell
|
|
48
|
+
* over 1000px tall showed four rows and "+56 more". [확인함] 2026-09-07
|
|
49
|
+
*
|
|
50
|
+
* The mode still changes here, so a host that ignores the event keeps working on its own.
|
|
51
|
+
*/
|
|
52
|
+
switchTo(mode) {
|
|
53
|
+
this.mode = mode;
|
|
54
|
+
this.dispatchEvent(new CustomEvent('mode-change', { detail: { mode }, bubbles: true, composed: true }));
|
|
27
55
|
}
|
|
28
|
-
`; }
|
|
29
56
|
render() {
|
|
30
57
|
return this.mode == 'weekly'
|
|
31
58
|
? html `
|
|
32
59
|
<calendar-weekly .eventProvider=${this.eventProvider}>
|
|
33
|
-
<md-icon @click=${(
|
|
60
|
+
<md-icon @click=${() => this.switchTo('monthly')}>calendar_month</md-icon>
|
|
34
61
|
</calendar-weekly>
|
|
35
62
|
`
|
|
36
63
|
: html `
|
|
37
64
|
<calendar-monthly .eventProvider=${this.eventProvider}>
|
|
38
|
-
<md-icon @click=${(
|
|
65
|
+
<md-icon @click=${() => this.switchTo('weekly')}>calendar_view_week</md-icon>
|
|
39
66
|
</calendar-monthly>
|
|
40
67
|
`;
|
|
41
68
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-event-view.js","sourceRoot":"","sources":["../../src/ox-event-view.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-event-view.js","sourceRoot":"","sources":["../../src/ox-event-view.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAK1C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QA4BuB,SAAI,GAAyB,SAAS,CAAA;IAkCpE,CAAC;aA7DQ,WAAM,GAAG;QACd;;;;;WAKG;QACH,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBF;KACF,AAzBY,CAyBZ;IAKD;;;;;;;;;;;;OAYG;IACK,QAAQ,CAAC,IAA0B;QACzC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IACzG,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,IAAI,QAAQ;YAC1B,CAAC,CAAC,IAAI,CAAA;4CACgC,IAAI,CAAC,aAAa;8BAChC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;;SAEnD;YACH,CAAC,CAAC,IAAI,CAAA;6CACiC,IAAI,CAAC,aAAa;8BACjC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;;SAElD,CAAA;IACP,CAAC;;AAjC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAuC;AACtC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA8B;AA7B9C,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA8DvB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport './calendar-monthly.js'\nimport './calendar-weekly.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { EventProvider } from './types.js'\n\n@customElement('ox-event-view')\nexport class OxEventView extends LitElement {\n static styles = [\n /*\n * The host page is the one that decides this element scrolls — operato-plant sets\n * overflow: auto on it. A rule written here still reaches that scrollbar: measured in\n * Chrome, :host::-webkit-scrollbar from inside the shadow root gives the same 5px as the\n * identical rule written on the outer page. [확인함] 2026-09-07\n */\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: var(--md-sys-color-background);\n color: var(--md-sys-color-on-background);\n }\n\n calendar-weekly,\n calendar-monthly {\n flex: 1;\n\n padding: 0;\n margin: 0;\n }\n `\n ]\n\n @property({ type: String }) mode: 'monthly' | 'weekly' = 'monthly'\n @property({ type: Object }) eventProvider?: EventProvider\n\n /**\n * Switch view, and tell the host.\n *\n * There are two switches for one piece of state: the icon in here, and whatever the host page\n * puts on its own toolbar. Without the event the host never learns that the icon was used, and\n * anything it derives from the mode goes stale.\n *\n * What that cost on screen: the factory calendar slices each day to a per-view maximum (4 in\n * monthly, 32 in weekly). Switching by this icon left the host on monthly, so a weekly cell\n * over 1000px tall showed four rows and \"+56 more\". [확인함] 2026-09-07\n *\n * The mode still changes here, so a host that ignores the event keeps working on its own.\n */\n private switchTo(mode: 'monthly' | 'weekly') {\n this.mode = mode\n this.dispatchEvent(new CustomEvent('mode-change', { detail: { mode }, bubbles: true, composed: true }))\n }\n\n render() {\n return this.mode == 'weekly'\n ? html`\n <calendar-weekly .eventProvider=${this.eventProvider}>\n <md-icon @click=${() => this.switchTo('monthly')}>calendar_month</md-icon>\n </calendar-weekly>\n `\n : html`\n <calendar-monthly .eventProvider=${this.eventProvider}>\n <md-icon @click=${() => this.switchTo('weekly')}>calendar_view_week</md-icon>\n </calendar-monthly>\n `\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '../src/ox-event-view.js';
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { html, fixture, expect, oneEvent } from '@open-wc/testing';
|
|
2
|
+
import '../src/ox-event-view.js';
|
|
3
|
+
/**
|
|
4
|
+
* Two things this calendar got wrong on a real screen, both of them structural.
|
|
5
|
+
*
|
|
6
|
+
* The package had no tests at all, which is why a layout that squeezed six of seven days to
|
|
7
|
+
* 58px and a view switch that told nobody both shipped.
|
|
8
|
+
*/
|
|
9
|
+
/** One long unbreakable title on one day, the way a work order id looks. */
|
|
10
|
+
const LONG = 'WO-CT-MAIN-003 · CT-FRAME-SET-ASSEMBLY-STATION';
|
|
11
|
+
function providerWithLongTitleOn(index) {
|
|
12
|
+
return {
|
|
13
|
+
fetchEventsForCalendar: async (calendar) => {
|
|
14
|
+
const days = (calendar ?? []).filter(one => one?.date instanceof Date);
|
|
15
|
+
const map = new Map();
|
|
16
|
+
days.forEach((day, i) => {
|
|
17
|
+
map.set(day.date, [
|
|
18
|
+
{
|
|
19
|
+
title: i === index ? LONG : 'short',
|
|
20
|
+
color: 'currentColor',
|
|
21
|
+
/*
|
|
22
|
+
* nowrap is what a host page asks for when it wants one line per row and an
|
|
23
|
+
* ellipsis. It also makes the chip's min-content width the whole title, which is
|
|
24
|
+
* the pressure this test is about.
|
|
25
|
+
*/
|
|
26
|
+
template: html `<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
|
|
27
|
+
${i === index ? LONG : 'short'}
|
|
28
|
+
</div>`
|
|
29
|
+
}
|
|
30
|
+
]);
|
|
31
|
+
});
|
|
32
|
+
return map;
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
async function settle(el) {
|
|
37
|
+
await el.updateComplete;
|
|
38
|
+
const inner = el.renderRoot.querySelector('calendar-monthly, calendar-weekly');
|
|
39
|
+
await inner?.updateComplete;
|
|
40
|
+
/* the provider is awaited inside updated(), so give it a turn and let layout settle */
|
|
41
|
+
await new Promise(resolve => setTimeout(resolve, 0));
|
|
42
|
+
await inner?.updateComplete;
|
|
43
|
+
return inner;
|
|
44
|
+
}
|
|
45
|
+
describe('the seven day columns stay the same width', () => {
|
|
46
|
+
for (const mode of ['monthly', 'weekly']) {
|
|
47
|
+
it(`${mode}: one long title does not take the room of the other six days`, async () => {
|
|
48
|
+
const el = (await fixture(html `<div style="width: 700px">
|
|
49
|
+
<ox-event-view mode=${mode} .eventProvider=${providerWithLongTitleOn(2)}></ox-event-view>
|
|
50
|
+
</div>`));
|
|
51
|
+
const view = el.querySelector('ox-event-view');
|
|
52
|
+
const inner = await settle(view);
|
|
53
|
+
const cells = [...inner.renderRoot.querySelectorAll('li[date]')];
|
|
54
|
+
expect(cells.length, 'no date cells were drawn, so this test measures nothing').to.be.greaterThan(6);
|
|
55
|
+
const widths = cells.slice(0, 7).map(one => Math.round(one.getBoundingClientRect().width));
|
|
56
|
+
const widest = Math.max(...widths);
|
|
57
|
+
const narrowest = Math.min(...widths);
|
|
58
|
+
/*
|
|
59
|
+
* Measured before min-width: 0 was added — [58, 58, 353, 58, 58, 58, 58] at this width.
|
|
60
|
+
* A pixel of rounding is fine; a column taking six times its share is not.
|
|
61
|
+
*/
|
|
62
|
+
expect(widest - narrowest, `columns came out ${widths.join(', ')}`).to.be.lessThan(2);
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
describe('the built-in view switch tells the host', () => {
|
|
67
|
+
it('emits mode-change, because the host keeps its own state next to this one', async () => {
|
|
68
|
+
const el = (await fixture(html `<ox-event-view mode="monthly"></ox-event-view>`));
|
|
69
|
+
const inner = await settle(el);
|
|
70
|
+
const toggle = inner.querySelector('md-icon');
|
|
71
|
+
expect(toggle, 'the switch is slotted content — without it nothing can be clicked').to.exist;
|
|
72
|
+
const heard = oneEvent(el, 'mode-change');
|
|
73
|
+
toggle.click();
|
|
74
|
+
const event = await heard;
|
|
75
|
+
expect(event.detail.mode).to.equal('weekly');
|
|
76
|
+
expect(el.mode, 'the element still switches on its own, for hosts that ignore the event').to.equal('weekly');
|
|
77
|
+
});
|
|
78
|
+
it('reports monthly on the way back', async () => {
|
|
79
|
+
const el = (await fixture(html `<ox-event-view mode="weekly"></ox-event-view>`));
|
|
80
|
+
const inner = await settle(el);
|
|
81
|
+
const heard = oneEvent(el, 'mode-change');
|
|
82
|
+
inner.querySelector('md-icon').click();
|
|
83
|
+
expect((await heard).detail.mode).to.equal('monthly');
|
|
84
|
+
});
|
|
85
|
+
});
|
|
86
|
+
//# sourceMappingURL=calendar-layout.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar-layout.test.js","sourceRoot":"","sources":["../../test/calendar-layout.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect, oneEvent } from '@open-wc/testing'\n\nimport '../src/ox-event-view.js'\nimport { OxEventView } from '../src/ox-event-view.js'\nimport { EventProvider, CALENDAR, BizEvent } from '../src/types.js'\n\n/**\n * Two things this calendar got wrong on a real screen, both of them structural.\n *\n * The package had no tests at all, which is why a layout that squeezed six of seven days to\n * 58px and a view switch that told nobody both shipped.\n */\n\n/** One long unbreakable title on one day, the way a work order id looks. */\nconst LONG = 'WO-CT-MAIN-003 · CT-FRAME-SET-ASSEMBLY-STATION'\n\nfunction providerWithLongTitleOn(index: number): EventProvider {\n return {\n fetchEventsForCalendar: async (calendar: CALENDAR) => {\n const days = (calendar ?? []).filter(one => one?.date instanceof Date)\n const map = new Map<Date, BizEvent[]>()\n\n days.forEach((day, i) => {\n map.set(day.date, [\n {\n title: i === index ? LONG : 'short',\n color: 'currentColor',\n /*\n * nowrap is what a host page asks for when it wants one line per row and an\n * ellipsis. It also makes the chip's min-content width the whole title, which is\n * the pressure this test is about.\n */\n template: html`<div style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">\n ${i === index ? LONG : 'short'}\n </div>`\n }\n ])\n })\n\n return map\n }\n }\n}\n\nasync function settle(el: OxEventView) {\n await el.updateComplete\n const inner = el.renderRoot.querySelector('calendar-monthly, calendar-weekly') as any\n await inner?.updateComplete\n /* the provider is awaited inside updated(), so give it a turn and let layout settle */\n await new Promise(resolve => setTimeout(resolve, 0))\n await inner?.updateComplete\n return inner\n}\n\ndescribe('the seven day columns stay the same width', () => {\n for (const mode of ['monthly', 'weekly'] as const) {\n it(`${mode}: one long title does not take the room of the other six days`, async () => {\n const el = (await fixture(\n html`<div style=\"width: 700px\">\n <ox-event-view mode=${mode} .eventProvider=${providerWithLongTitleOn(2)}></ox-event-view>\n </div>`\n )) as HTMLElement\n\n const view = el.querySelector('ox-event-view') as OxEventView\n const inner = await settle(view)\n\n const cells = [...inner.renderRoot.querySelectorAll('li[date]')] as HTMLElement[]\n expect(cells.length, 'no date cells were drawn, so this test measures nothing').to.be.greaterThan(6)\n\n const widths = cells.slice(0, 7).map(one => Math.round(one.getBoundingClientRect().width))\n const widest = Math.max(...widths)\n const narrowest = Math.min(...widths)\n\n /*\n * Measured before min-width: 0 was added — [58, 58, 353, 58, 58, 58, 58] at this width.\n * A pixel of rounding is fine; a column taking six times its share is not.\n */\n expect(widest - narrowest, `columns came out ${widths.join(', ')}`).to.be.lessThan(2)\n })\n }\n})\n\ndescribe('the built-in view switch tells the host', () => {\n it('emits mode-change, because the host keeps its own state next to this one', async () => {\n const el = (await fixture(html`<ox-event-view mode=\"monthly\"></ox-event-view>`)) as OxEventView\n const inner = await settle(el)\n\n const toggle = inner.querySelector('md-icon') as HTMLElement\n expect(toggle, 'the switch is slotted content — without it nothing can be clicked').to.exist\n\n const heard = oneEvent(el, 'mode-change')\n toggle.click()\n const event = await heard\n\n expect(event.detail.mode).to.equal('weekly')\n expect(el.mode, 'the element still switches on its own, for hosts that ignore the event').to.equal('weekly')\n })\n\n it('reports monthly on the way back', async () => {\n const el = (await fixture(html`<ox-event-view mode=\"weekly\"></ox-event-view>`)) as OxEventView\n const inner = await settle(el)\n\n const heard = oneEvent(el, 'mode-change')\n ;(inner.querySelector('md-icon') as HTMLElement).click()\n\n expect((await heard).detail.mode).to.equal('monthly')\n })\n})\n"]}
|