@operato/event-view 2.0.0-alpha.68 → 2.0.0-beta.0
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 +59 -0
- package/dist/src/calendar-monthly-styles.js +11 -4
- package/dist/src/calendar-monthly-styles.js.map +1 -1
- package/dist/src/calendar-monthly.d.ts +1 -0
- package/dist/src/calendar-monthly.js +8 -7
- package/dist/src/calendar-monthly.js.map +1 -1
- package/dist/src/calendar-weekly-styles.js +8 -0
- package/dist/src/calendar-weekly-styles.js.map +1 -1
- package/dist/src/calendar-weekly.d.ts +1 -0
- package/dist/src/calendar-weekly.js +8 -7
- package/dist/src/calendar-weekly.js.map +1 -1
- package/dist/src/ox-event-view.js +4 -1
- package/dist/src/ox-event-view.js.map +1 -1
- package/dist/stories/index.stories.d.ts +5 -0
- package/dist/stories/index.stories.js +13 -2
- package/dist/stories/index.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/calendar-monthly-styles.ts +11 -4
- package/src/calendar-monthly.ts +9 -7
- package/src/calendar-weekly-styles.ts +8 -0
- package/src/calendar-weekly.ts +9 -7
- package/src/ox-event-view.ts +4 -1
- package/stories/index.stories.ts +14 -2
- package/themes/app-theme.css +1 -1
- package/themes/calendar-theme.css +10 -4
- package/themes/dark-hc.css +151 -0
- package/themes/dark-mc.css +151 -0
- package/themes/dark.css +151 -0
- package/themes/light-hc.css +151 -0
- package/themes/light-mc.css +151 -0
- package/themes/light.css +151 -0
- package/themes/material-theme.css +16 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,65 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.0.0-beta.0](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.158...v2.0.0-beta.0) (2024-06-01)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @operato/event-view
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [2.0.0-alpha.157](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.156...v2.0.0-alpha.157) (2024-06-01)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### :bug: Bug Fix
|
|
18
|
+
|
|
19
|
+
* theming styles ([118fe71](https://github.com/hatiolab/operato/commit/118fe711fd86d89453f97320bf9fef1e51b4ac23))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
## [2.0.0-alpha.154](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.153...v2.0.0-alpha.154) (2024-06-01)
|
|
24
|
+
|
|
25
|
+
**Note:** Version bump only for package @operato/event-view
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
## [2.0.0-alpha.148](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.147...v2.0.0-alpha.148) (2024-05-30)
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
### :bug: Bug Fix
|
|
35
|
+
|
|
36
|
+
* dark theme for event-view ([0480a3d](https://github.com/hatiolab/operato/commit/0480a3d970a488e9f0cd93a1af66b4516c44b4bb))
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
## [2.0.0-alpha.111](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.110...v2.0.0-alpha.111) (2024-05-02)
|
|
41
|
+
|
|
42
|
+
**Note:** Version bump only for package @operato/event-view
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
## [2.0.0-alpha.110](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.109...v2.0.0-alpha.110) (2024-05-02)
|
|
49
|
+
|
|
50
|
+
**Note:** Version bump only for package @operato/event-view
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
## [2.0.0-alpha.73](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.72...v2.0.0-alpha.73) (2024-04-14)
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
### :bug: Bug Fix
|
|
60
|
+
|
|
61
|
+
* remove whole mwc-components ([c1a4f3e](https://github.com/hatiolab/operato/commit/c1a4f3e269f591919bf91e6afdb8bbc208e59c49))
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
6
65
|
## [2.0.0-alpha.68](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.67...v2.0.0-alpha.68) (2024-04-13)
|
|
7
66
|
|
|
8
67
|
|
|
@@ -3,7 +3,8 @@ export const CalendarMonthlyStyles = css `
|
|
|
3
3
|
:host {
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: column;
|
|
6
|
-
|
|
6
|
+
|
|
7
|
+
--md-text-button-container-height: 24px;
|
|
7
8
|
}
|
|
8
9
|
|
|
9
10
|
[head] {
|
|
@@ -19,6 +20,10 @@ export const CalendarMonthlyStyles = css `
|
|
|
19
20
|
margin-left: auto;
|
|
20
21
|
}
|
|
21
22
|
|
|
23
|
+
::slotted(*) {
|
|
24
|
+
color: var(--md-sys-color-secondary);
|
|
25
|
+
}
|
|
26
|
+
|
|
22
27
|
ol {
|
|
23
28
|
flex: 1;
|
|
24
29
|
|
|
@@ -46,14 +51,15 @@ export const CalendarMonthlyStyles = css `
|
|
|
46
51
|
|
|
47
52
|
li[day-of-week] {
|
|
48
53
|
opacity: 1;
|
|
49
|
-
background-color: var(--calendar-current-monty-background-color
|
|
54
|
+
background-color: var(--calendar-current-monty-background-color);
|
|
50
55
|
padding: var(--calendar-monthly-label-padding);
|
|
51
|
-
color:
|
|
56
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
52
57
|
text-align: center;
|
|
53
58
|
}
|
|
54
59
|
|
|
55
60
|
li[current-month] {
|
|
56
|
-
background-color: var(--calendar-current-monthly-background-color,
|
|
61
|
+
background-color: var(--calendar-current-monthly-background-color, var(--md-sys-color-primary-container));
|
|
62
|
+
color: var(--md-sys-color-on-primary-container);
|
|
57
63
|
opacity: 1;
|
|
58
64
|
}
|
|
59
65
|
|
|
@@ -85,6 +91,7 @@ export const CalendarMonthlyStyles = css `
|
|
|
85
91
|
[event] {
|
|
86
92
|
display: block;
|
|
87
93
|
background-color: var(--calendar-monthly-background-color);
|
|
94
|
+
color: var(--calendar-monthly-color);
|
|
88
95
|
border: var(--calendar-monthly-event-border);
|
|
89
96
|
border-width: var(--calendar-monthly-event-border-width);
|
|
90
97
|
margin: var(--calendar-monthly-event-margin, 0 0 4px 0);
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGvC,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 font-size: x-large;\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 #999);\n }\n\n li {\n position: relative;\n\n min-height: 10%;\n list-style: none;\n border: var(--calendar-monthly-border, 1px solid 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 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-monty-background-color);\n padding: var(--calendar-monthly-label-padding);\n color: var(--md-sys-color-on-secondary-container);\n text-align: center;\n }\n\n li[current-month] {\n background-color: var(--calendar-current-monthly-background-color, var(--md-sys-color-primary-container));\n color: var(--md-sys-color-on-primary-container);\n opacity: 1;\n }\n\n li[date] {\n 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, #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, #fff);\n min-width: 16px;\n text-align: center;\n }\n\n [date] div {\n display: block;\n font-size: small;\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`\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
+
import '@material/web/button/text-button.js';
|
|
2
3
|
import dayjs from 'dayjs/esm/index';
|
|
3
4
|
import { html, LitElement } from 'lit';
|
|
4
5
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
@@ -17,23 +18,23 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
|
|
|
17
18
|
<div this-month><b>${dayjs(new Date(this.year, this.month)).format('MMMM')}</b> ${this.year}</div>
|
|
18
19
|
|
|
19
20
|
<div nav>
|
|
20
|
-
<
|
|
21
|
+
<md-text-button
|
|
21
22
|
@click=${() => {
|
|
22
23
|
this.moveTo(dayjs(new Date(this.year, this.month, 1)).subtract(1, 'month'));
|
|
23
24
|
}}
|
|
24
|
-
><</
|
|
25
|
+
><</md-text-button
|
|
25
26
|
>
|
|
26
|
-
<
|
|
27
|
+
<md-text-button
|
|
27
28
|
@click=${() => {
|
|
28
29
|
this.moveTo(dayjs(new Date(dayjs().year(), dayjs().month(), 1)));
|
|
29
30
|
}}
|
|
30
|
-
>Today</
|
|
31
|
+
>Today</md-text-button
|
|
31
32
|
>
|
|
32
|
-
<
|
|
33
|
+
<md-text-button
|
|
33
34
|
@click=${() => {
|
|
34
35
|
this.moveTo(dayjs(new Date(this.year, this.month, 1)).add(1, 'month'));
|
|
35
36
|
}}
|
|
36
|
-
>></
|
|
37
|
+
>></md-text-button
|
|
37
38
|
>
|
|
38
39
|
</div>
|
|
39
40
|
|
|
@@ -114,7 +115,7 @@ let CalendarMonthly = class CalendarMonthly extends LitElement {
|
|
|
114
115
|
}
|
|
115
116
|
};
|
|
116
117
|
__decorate([
|
|
117
|
-
property({ type:
|
|
118
|
+
property({ type: Object })
|
|
118
119
|
], CalendarMonthly.prototype, "eventProvider", void 0);
|
|
119
120
|
__decorate([
|
|
120
121
|
state()
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar-monthly.js","sourceRoot":"","sources":["../../src/calendar-monthly.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"calendar-monthly.js","sourceRoot":"","sources":["../../src/calendar-monthly.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/text-button.js'\n\nimport dayjs, { Dayjs } from 'dayjs/esm/index'\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { CalendarMonthlyStyles } from './calendar-monthly-styles'\nimport { BizEvent, CALENDAR, WEEKDAYS, EventProvider, isToday } from './types'\n\n@customElement('calendar-monthly')\nexport class CalendarMonthly extends LitElement {\n static styles = [CalendarMonthlyStyles]\n\n @property({ type: Object }) eventProvider?: EventProvider\n\n @state() year: number = dayjs().year()\n @state() month: number = dayjs().month()\n @state() calendar?: CALENDAR\n @state() eventMap?: Map<Date, BizEvent[]>\n\n render() {\n return html`\n <div head>\n <div this-month><b>${dayjs(new Date(this.year, this.month)).format('MMMM')}</b> ${this.year}</div>\n\n <div nav>\n <md-text-button\n @click=${() => {\n this.moveTo(dayjs(new Date(this.year, this.month, 1)).subtract(1, 'month'))\n }}\n ><</md-text-button\n >\n <md-text-button\n @click=${() => {\n this.moveTo(dayjs(new Date(dayjs().year(), dayjs().month(), 1)))\n }}\n >Today</md-text-button\n >\n <md-text-button\n @click=${() => {\n this.moveTo(dayjs(new Date(this.year, this.month, 1)).add(1, 'month'))\n }}\n >></md-text-button\n >\n </div>\n\n <slot></slot>\n </div>\n\n <ol>\n ${WEEKDAYS.map(date => html` <li day-of-week>${date}</li> `)}\n ${this.calendar?.map(\n date => html`\n <li ?today=${date.today} ?current-month=${date.thisMonth} date>\n <span date-label>${date.label}</span>\n <div>\n ${(this.eventMap?.get(date?.date) || []).map(({ title, color, template }) =>\n template ? template : html`<span event .style=\"border-color: ${color};\">${title}</span>`\n )}\n </div>\n </li>\n `\n )}\n </ol>\n `\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('year') || changes.has('month')) {\n const currentMonth = this.createDaysForCurrentMonth(this.year, this.month)\n\n const calendar = [\n ...this.createDaysForPreviousMonth(this.year, this.month, currentMonth),\n ...currentMonth,\n ...this.createDaysForNextMonth(this.year, this.month, currentMonth)\n ]\n\n this.eventMap = await this.eventProvider?.fetchEventsForCalendar(calendar)\n this.calendar = calendar\n }\n }\n\n moveTo(month: Dayjs) {\n this.year = month.year()\n this.month = month.month()\n }\n\n createDaysForCurrentMonth(year: number, month: number): CALENDAR {\n return [...Array(dayjs(new Date(year, month, 1)).daysInMonth())].map((day, index) => {\n const date = new Date(year, month, index + 1)\n const label = index == 0 ? dayjs(date).format('MMM D') : dayjs(date).format('D')\n return {\n date,\n label,\n thisMonth: true,\n today: isToday(date)\n }\n })\n }\n\n createDaysForPreviousMonth(year: number, month: number, currentMonth: CALENDAR): CALENDAR {\n const previousMonth = dayjs(new Date(year, month, 1)).subtract(1, 'month')\n\n const visibleNumberOfDaysFromPreviousMonth = (dayjs(currentMonth[0].date) as any).weekday()\n\n const previousMonthLastMondayDayOfMonth = dayjs(currentMonth[0].date)\n .subtract(visibleNumberOfDaysFromPreviousMonth, 'day')\n .date()\n\n return [...Array(visibleNumberOfDaysFromPreviousMonth)].map((day, index) => {\n const date = new Date(previousMonth.year(), previousMonth.month(), previousMonthLastMondayDayOfMonth + index)\n const label = index == 0 ? dayjs(date).format('MMM D') : dayjs(date).format('D')\n return {\n date,\n label,\n thisMonth: false,\n today: isToday(date)\n }\n })\n }\n\n createDaysForNextMonth(year: number, month: number, currentMonth: CALENDAR): CALENDAR {\n const nextMonth = dayjs(new Date(year, month, 1)).add(1, 'month')\n\n const visibleNumberOfDaysFromNextMonth = 6 - (dayjs(new Date(year, month, currentMonth.length)) as any).weekday()\n\n return [...Array(visibleNumberOfDaysFromNextMonth)].map((day, index) => {\n const date = new Date(nextMonth.year(), nextMonth.month(), index + 1)\n const label = index == 0 ? dayjs(date).format('MMM D') : dayjs(date).format('D')\n return {\n date,\n label,\n thisMonth: false,\n today: isToday(date)\n }\n })\n }\n}\n"]}
|
|
@@ -4,6 +4,9 @@ export const CalendarWeeklyStyles = css `
|
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: column;
|
|
6
6
|
color: var(--calendar-weekly-text-color, #585858);
|
|
7
|
+
|
|
8
|
+
--md-text-button-container-height: 24px;
|
|
9
|
+
--md-sys-color-primary: rgba(var(--secondary-color-rgb), 0.8);
|
|
7
10
|
}
|
|
8
11
|
|
|
9
12
|
[head] {
|
|
@@ -24,6 +27,10 @@ export const CalendarWeeklyStyles = css `
|
|
|
24
27
|
margin-left: auto;
|
|
25
28
|
}
|
|
26
29
|
|
|
30
|
+
::slotted(*) {
|
|
31
|
+
color: var(--md-sys-color-primary);
|
|
32
|
+
}
|
|
33
|
+
|
|
27
34
|
ol {
|
|
28
35
|
flex: 1;
|
|
29
36
|
|
|
@@ -44,6 +51,7 @@ export const CalendarWeeklyStyles = css `
|
|
|
44
51
|
border-width: var(--calendar-weekly-border-width, 0 1px 1px 0px);
|
|
45
52
|
opacity: var(--calendar-weekly-opacity);
|
|
46
53
|
}
|
|
54
|
+
|
|
47
55
|
li:nth-child(7n + 1) {
|
|
48
56
|
border-left-width: 1px;
|
|
49
57
|
}
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmGtC,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, #585858);\n\n --md-text-button-container-height: 24px;\n --md-sys-color-primary: rgba(var(--secondary-color-rgb), 0.8);\n }\n\n [head] {\n display: flex;\n align-items: center;\n }\n\n [head-week] {\n display: flex;\n align-items: left;\n }\n\n [this-week] {\n font-size: x-large;\n }\n\n [nav] {\n margin-left: auto;\n }\n\n ::slotted(*) {\n color: var(--md-sys-color-primary);\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 #999);\n }\n\n li {\n position: relative;\n\n list-style: none;\n border: var(--calendar-weekly-border, 1px solid 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\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, #fff);\n padding: var(--calendar-weekly-label-padding);\n color: rgba(var(--secondary-color-rgb), 0.8);\n text-align: center;\n }\n\n li[current-week] {\n background-color: var(--calendar-current-monthly-background-color, #fff);\n opacity: 1;\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, #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, #fff);\n min-width: 16px;\n text-align: center;\n }\n\n [date] div {\n display: block;\n font-size: small;\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`\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
+
import '@material/web/button/text-button.js';
|
|
2
3
|
import dayjs from 'dayjs/esm/index';
|
|
3
4
|
import { html, LitElement } from 'lit';
|
|
4
5
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
@@ -20,27 +21,27 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
|
|
|
20
21
|
</div>
|
|
21
22
|
|
|
22
23
|
<div nav>
|
|
23
|
-
<
|
|
24
|
+
<md-text-button
|
|
24
25
|
@click=${() => {
|
|
25
26
|
const dayJs = this.getLastDateOfWeek(this.year, this.week);
|
|
26
27
|
const prevWeek = dayJs.subtract(1, 'week');
|
|
27
28
|
this.moveTo(prevWeek.year(), prevWeek.month(), prevWeek.week());
|
|
28
29
|
}}
|
|
29
|
-
><</
|
|
30
|
+
><</md-text-button
|
|
30
31
|
>
|
|
31
|
-
<
|
|
32
|
+
<md-text-button
|
|
32
33
|
@click=${() => {
|
|
33
34
|
this.moveTo(dayjs().year(), dayjs().month(), dayjs().week());
|
|
34
35
|
}}
|
|
35
|
-
>Today</
|
|
36
|
+
>Today</md-text-button
|
|
36
37
|
>
|
|
37
|
-
<
|
|
38
|
+
<md-text-button
|
|
38
39
|
@click=${() => {
|
|
39
40
|
const dayJs = this.getLastDateOfWeek(this.year, this.week);
|
|
40
41
|
const nextWeek = dayJs.add(1, 'week');
|
|
41
42
|
this.moveTo(nextWeek.year(), nextWeek.month(), nextWeek.week());
|
|
42
43
|
}}
|
|
43
|
-
>></
|
|
44
|
+
>></md-text-button
|
|
44
45
|
>
|
|
45
46
|
</div>
|
|
46
47
|
|
|
@@ -98,7 +99,7 @@ let CalendarWeekly = class CalendarWeekly extends LitElement {
|
|
|
98
99
|
}
|
|
99
100
|
};
|
|
100
101
|
__decorate([
|
|
101
|
-
property({ type:
|
|
102
|
+
property({ type: Object })
|
|
102
103
|
], CalendarWeekly.prototype, "eventProvider", void 0);
|
|
103
104
|
__decorate([
|
|
104
105
|
state()
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar-weekly.js","sourceRoot":"","sources":["../../src/calendar-weekly.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"calendar-weekly.js","sourceRoot":"","sources":["../../src/calendar-weekly.ts"],"names":[],"mappings":";AAAA,OAAO,qCAAqC,CAAA;AAE5C,OAAO,KAAgB,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAA;AAC/D,OAAO,EAAsB,QAAQ,EAAiB,OAAO,EAAE,MAAM,SAAS,CAAA;AAGvE,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAKI,SAAI,GAAW,KAAK,EAAE,CAAC,IAAI,EAAE,CAAA;QAC7B,UAAK,GAAW,KAAK,EAAE,CAAC,KAAK,EAAE,CAAA;QAC/B,SAAI,GAAW,KAAK,EAAE,CAAC,IAAI,EAAE,CAAA;IAgGxC,CAAC;aAtGQ,WAAM,GAAG,CAAC,oBAAoB,CAAC,AAAzB,CAAyB;IAUtC,MAAM;QACJ,OAAO,IAAI,CAAA;;;eAGA,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,IAAI;;;;;qBAKrF,GAAG,EAAE;YACZ,MAAM,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;YAC1D,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA;YAC1C,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,QAAQ,CAAC,KAAK,EAAE,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAA;QACjE,CAAC;;;;qBAIQ,GAAG,EAAE;YACZ,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,CAAA;QAC9D,CAAC;;;;qBAIQ,GAAG,EAAE;YACZ,MAAM,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;YAC1D,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA;YACrC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,QAAQ,CAAC,KAAK,EAAE,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAA;QACjE,CAAC;;;;;;;;;UASH,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACnC,OAAO,IAAI,CAAA;yBACI,IAAI,CAAC,KAAK,iCAAiC,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC;WACtF,CAAA;QACH,CAAC,CAAC;UACA,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE;YAC1B,OAAO,IAAI,CAAA;;gBAEL,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC1E,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,qCAAqC,KAAK,MAAM,KAAK,SAAS,CACzF;;gBAEC,CAAA;QACR,CAAC,CAAC;;KAEL,CAAA;IACH,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,OAA6B;QACzC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACvE,MAAM,QAAQ,GAAG,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;YAEpE,IAAI,CAAC,QAAQ,GAAG,MAAM,IAAI,CAAC,aAAa,EAAE,sBAAsB,CAAC,QAAQ,CAAC,CAAA;YAC1E,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;QAC1B,CAAC;IACH,CAAC;IAED,MAAM,CAAC,IAAY,EAAE,KAAa,EAAE,IAAY;QAC9C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;IAClB,CAAC;IAED,iBAAiB,CAAC,IAAY,EAAE,IAAY;QAC1C,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAC/D,IAAI,IAAI,CAAC,CAAA,CAAC,wCAAwC;QAClD,OAAO,gBAAgB,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;IACxC,CAAC;IAED,wBAAwB,CAAC,IAAY,EAAE,IAAY;QACjD,MAAM,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;QACpD,MAAM,QAAQ,GAAG,CAAC,CAAA;QAElB,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;aACxB,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAClB,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,SAAS,CAAC,KAAK,EAAE,EAAE,SAAS,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC,CAAA;YACpF,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YACzC,OAAO;gBACL,IAAI;gBACJ,KAAK;gBACL,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC;aACrB,CAAA;QACH,CAAC,CAAC;aACD,OAAO,EAAE,CAAA;IACd,CAAC;;AAnG2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA8B;AAEhD;IAAR,KAAK,EAAE;4CAA8B;AAC7B;IAAR,KAAK,EAAE;6CAAgC;AAC/B;IAAR,KAAK,EAAE;4CAA8B;AAC7B;IAAR,KAAK,EAAE;gDAAoB;AACnB;IAAR,KAAK,EAAE;gDAAiC;AAT9B,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAuG1B","sourcesContent":["import '@material/web/button/text-button.js'\n\nimport dayjs, { Dayjs } from 'dayjs/esm/index'\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { CalendarWeeklyStyles } from './calendar-weekly-styles'\nimport { BizEvent, CALENDAR, WEEKDAYS, EventProvider, isToday } from './types'\n\n@customElement('calendar-weekly')\nexport class CalendarWeekly extends LitElement {\n static styles = [CalendarWeeklyStyles]\n\n @property({ type: Object }) eventProvider?: EventProvider\n\n @state() year: number = dayjs().year()\n @state() month: number = dayjs().month()\n @state() week: number = dayjs().week()\n @state() calendar?: CALENDAR\n @state() eventMap?: Map<Date, BizEvent[]>\n\n render() {\n return html`\n <div head>\n <div this-week>\n <b>${dayjs(new Date(this.year, this.month)).format('MMMM')}</b> ${this.year} <b>Week ${this.week}</b>\n </div>\n\n <div nav>\n <md-text-button\n @click=${() => {\n const dayJs = this.getLastDateOfWeek(this.year, this.week)\n const prevWeek = dayJs.subtract(1, 'week')\n this.moveTo(prevWeek.year(), prevWeek.month(), prevWeek.week())\n }}\n ><</md-text-button\n >\n <md-text-button\n @click=${() => {\n this.moveTo(dayjs().year(), dayjs().month(), dayjs().week())\n }}\n >Today</md-text-button\n >\n <md-text-button\n @click=${() => {\n const dayJs = this.getLastDateOfWeek(this.year, this.week)\n const nextWeek = dayJs.add(1, 'week')\n this.moveTo(nextWeek.year(), nextWeek.month(), nextWeek.week())\n }}\n >></md-text-button\n >\n </div>\n\n <slot></slot>\n </div>\n\n <ol>\n ${this.calendar?.map((date, index) => {\n return html`\n <li ?today=${date.today} day-of-week><span date-label>${date.label}(${WEEKDAYS[index]})</span></li>\n `\n })}\n ${this.calendar?.map(date => {\n return html`<li day-task>\n <div>\n ${(this.eventMap?.get(date?.date) || []).map(({ title, color, template }) =>\n template ? template : html`<span event .style=\"border-color: ${color};\">${title}</span>`\n )}\n </div>\n </li>`\n })}\n </ol>\n `\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('year') || changes.has('month') || changes.has('week')) {\n const calendar = this.createDaysForCurrentWeek(this.year, this.week)\n\n this.eventMap = await this.eventProvider?.fetchEventsForCalendar(calendar)\n this.calendar = calendar\n }\n }\n\n moveTo(year: number, month: number, week: number) {\n this.year = year\n this.month = month\n this.week = week\n }\n\n getLastDateOfWeek(year: number, week: number): Dayjs {\n const firstWeekLastDay = dayjs(new Date(year, 0, 1)).endOf('w')\n week -= 1 // one-based week, so need the minus-one\n return firstWeekLastDay.add(week, 'w')\n }\n\n createDaysForCurrentWeek(year: number, week: number): CALENDAR {\n const lastDayjs = this.getLastDateOfWeek(year, week)\n const weekDays = 7\n\n return [...Array(weekDays)]\n .map((day, index) => {\n const date = new Date(lastDayjs.year(), lastDayjs.month(), lastDayjs.date() - index)\n const label = dayjs(date).format('MM-DD')\n return {\n date,\n label,\n thisWeek: true,\n today: isToday(date)\n }\n })\n .reverse()\n }\n}\n"]}
|
|
@@ -13,6 +13,9 @@ let OxEventView = class OxEventView extends LitElement {
|
|
|
13
13
|
:host {
|
|
14
14
|
display: flex;
|
|
15
15
|
flex-direction: column;
|
|
16
|
+
|
|
17
|
+
background-color: var(--md-sys-color-background);
|
|
18
|
+
color: var(--md-sys-color-on-background);
|
|
16
19
|
}
|
|
17
20
|
|
|
18
21
|
calendar-weekly {
|
|
@@ -40,7 +43,7 @@ __decorate([
|
|
|
40
43
|
property({ type: String })
|
|
41
44
|
], OxEventView.prototype, "mode", void 0);
|
|
42
45
|
__decorate([
|
|
43
|
-
property({ type:
|
|
46
|
+
property({ type: Object })
|
|
44
47
|
], OxEventView.prototype, "eventProvider", void 0);
|
|
45
48
|
OxEventView = __decorate([
|
|
46
49
|
customElement('ox-event-view')
|
|
@@ -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,oBAAoB,CAAA;AAC3B,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAKpD,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;
|
|
1
|
+
{"version":3,"file":"ox-event-view.js","sourceRoot":"","sources":["../../src/ox-event-view.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,oBAAoB,CAAA;AAC3B,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAKpD,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAkBuB,SAAI,GAAyB,SAAS,CAAA;IAgBpE,CAAC;aAjCQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;GAelB,AAfY,CAeZ;IAKD,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,IAAI,QAAQ;YAC1B,CAAC,CAAC,IAAI,CAAA;4CACgC,IAAI,CAAC,aAAa;8BAChC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;;SAE1D;YACH,CAAC,CAAC,IAAI,CAAA;6CACiC,IAAI,CAAC,aAAa;8BACjC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;;SAEzD,CAAA;IACP,CAAC;;AAf2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAuC;AACtC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA8B;AAnB9C,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAkCvB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport './calendar-monthly'\nimport './calendar-weekly'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { EventProvider } from './types'\n\n@customElement('ox-event-view')\nexport class OxEventView extends LitElement {\n static styles = 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 flex: 1;\n\n padding: 0;\n margin: 0;\n }\n `\n\n @property({ type: String }) mode: 'monthly' | 'weekly' = 'monthly'\n @property({ type: Object }) eventProvider?: EventProvider\n\n render() {\n return this.mode == 'weekly'\n ? html`\n <calendar-weekly .eventProvider=${this.eventProvider}>\n <md-icon @click=${(e: Event) => (this.mode = 'monthly')}>calendar_month</md-icon>\n </calendar-weekly>\n `\n : html`\n <calendar-monthly .eventProvider=${this.eventProvider}>\n <md-icon @click=${(e: Event) => (this.mode = 'weekly')}>calendar_view_week</md-icon>\n </calendar-monthly>\n `\n }\n}\n"]}
|
|
@@ -9,6 +9,10 @@ declare const _default: {
|
|
|
9
9
|
options: string[];
|
|
10
10
|
description: string;
|
|
11
11
|
};
|
|
12
|
+
theme: {
|
|
13
|
+
control: string;
|
|
14
|
+
options: string[];
|
|
15
|
+
};
|
|
12
16
|
};
|
|
13
17
|
};
|
|
14
18
|
export default _default;
|
|
@@ -19,6 +23,7 @@ interface Story<T> {
|
|
|
19
23
|
}
|
|
20
24
|
interface ArgTypes {
|
|
21
25
|
mode?: string;
|
|
26
|
+
theme?: string;
|
|
22
27
|
}
|
|
23
28
|
export declare const Regular: Story<ArgTypes>;
|
|
24
29
|
export declare const WeeklyEventView: Story<ArgTypes>;
|
|
@@ -57,12 +57,19 @@ export default {
|
|
|
57
57
|
title: 'EventView',
|
|
58
58
|
component: 'ox-event-view',
|
|
59
59
|
argTypes: {
|
|
60
|
-
mode: { control: 'select', options: ['monthly', 'weekly'], description: 'set event view mode' }
|
|
60
|
+
mode: { control: 'select', options: ['monthly', 'weekly'], description: 'set event view mode' },
|
|
61
|
+
theme: { control: 'select', options: ['light', 'dark'] }
|
|
61
62
|
}
|
|
62
63
|
};
|
|
63
|
-
const Template = ({ mode = 'monthly' }) => html `
|
|
64
|
+
const Template = ({ mode = 'monthly', theme = 'light' }) => html `
|
|
64
65
|
<link rel="stylesheet" href="/themes/app-theme.css" />
|
|
66
|
+
<link rel="stylesheet" href="/themes/material-theme.css" />
|
|
65
67
|
<link rel="stylesheet" href="/themes/calendar-theme.css" />
|
|
68
|
+
|
|
69
|
+
<link href="/themes/light.css" rel="stylesheet" />
|
|
70
|
+
<link href="/themes/dark.css" rel="stylesheet" />
|
|
71
|
+
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
72
|
+
|
|
66
73
|
<link
|
|
67
74
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
68
75
|
rel="stylesheet"
|
|
@@ -76,6 +83,10 @@ const Template = ({ mode = 'monthly' }) => html `
|
|
|
76
83
|
rel="stylesheet"
|
|
77
84
|
/>
|
|
78
85
|
|
|
86
|
+
<script>
|
|
87
|
+
document.body.classList.add('${theme}')
|
|
88
|
+
</script>
|
|
89
|
+
|
|
79
90
|
<ox-event-view mode=${mode} .eventProvider=${new SampleEventProvider()}> </ox-event-view>
|
|
80
91
|
`;
|
|
81
92
|
export const Regular = Template.bind({});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAChC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAG1C,MAAM,mBAAmB;IACvB,sBAAsB,CAAC,QAAkB;QACvC,MAAM,GAAG,GAAG,IAAI,GAAG,EAAoB,CAAA;QAEvC,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAC5B,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE;YACZ;gBACE,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,QAAQ;aAChB;YACD;gBACE,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,MAAM;aACd;YACD;gBACE,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,QAAQ;aAChB;YACD;gBACE,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,OAAO;aACf;YACD;gBACE,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,QAAQ;aAChB;YACD;gBACE,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,QAAQ;aAChB;YACD;gBACE,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,MAAM;aACd;YACD;gBACE,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,MAAM;aACd;YACD;gBACE,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,MAAM;aACd;SACF,CAAC,CACH,CAAA;QAED,OAAO,GAAG,CAAA;IACZ,CAAC;CACF;AAED,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE,WAAW,EAAE,qBAAqB,EAAE;
|
|
1
|
+
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAChC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAG1C,MAAM,mBAAmB;IACvB,sBAAsB,CAAC,QAAkB;QACvC,MAAM,GAAG,GAAG,IAAI,GAAG,EAAoB,CAAA;QAEvC,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAC5B,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE;YACZ;gBACE,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,QAAQ;aAChB;YACD;gBACE,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,MAAM;aACd;YACD;gBACE,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,QAAQ;aAChB;YACD;gBACE,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,OAAO;aACf;YACD;gBACE,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,QAAQ;aAChB;YACD;gBACE,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,QAAQ;aAChB;YACD;gBACE,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,MAAM;aACd;YACD;gBACE,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,MAAM;aACd;YACD;gBACE,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,MAAM;aACd;SACF,CAAC,CACH,CAAA;QAED,OAAO,GAAG,CAAA;IACZ,CAAC;CACF;AAED,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE,WAAW,EAAE,qBAAqB,EAAE;QAC/F,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;mCAuBxD,KAAK;;;wBAGhB,IAAI,mBAAmB,IAAI,mBAAmB,EAAE;CACvE,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAChD,eAAe,CAAC,IAAI,GAAG;IACrB,IAAI,EAAE,QAAQ;CACf,CAAA","sourcesContent":["import '../src/ox-event-view.js'\nimport { html, TemplateResult } from 'lit'\nimport { BizEvent, CALENDAR, EventProvider } from '../src/types.js'\n\nclass SampleEventProvider implements EventProvider {\n fetchEventsForCalendar(calendar: CALENDAR) {\n const map = new Map<Date, BizEvent[]>()\n\n calendar.forEach(({ date }) =>\n map.set(date, [\n {\n due: '2021-08-21',\n title: 'HAHAHA',\n color: 'yellow'\n },\n {\n due: '2021-08-21',\n title: 'HOHOHO',\n color: 'lime'\n },\n {\n due: '2021-08-21',\n title: 'HIHIHI',\n color: 'yellow'\n },\n {\n due: '2021-08-21',\n title: 'HEHEHE',\n color: 'white'\n },\n {\n due: '2021-08-21',\n title: 'KEKEKE',\n color: 'yellow'\n },\n {\n due: '2021-08-21',\n title: 'MEMEME',\n color: 'orange'\n },\n {\n due: '2021-08-21',\n title: 'MOMOMO',\n color: 'lime'\n },\n {\n due: '2021-08-21',\n title: 'QUOQUO',\n color: 'navy'\n },\n {\n due: '2021-08-21',\n title: 'ZZXXCC',\n color: 'gray'\n }\n ])\n )\n\n return map\n }\n}\n\nexport default {\n title: 'EventView',\n component: 'ox-event-view',\n argTypes: {\n mode: { control: 'select', options: ['monthly', 'weekly'], description: 'set event view mode' },\n theme: { control: 'select', options: ['light', 'dark'] }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n mode?: string\n theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({ mode = 'monthly', theme = 'light' }: ArgTypes) => html`\n <link rel=\"stylesheet\" href=\"/themes/app-theme.css\" />\n <link rel=\"stylesheet\" href=\"/themes/material-theme.css\" />\n <link rel=\"stylesheet\" href=\"/themes/calendar-theme.css\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <script>\n document.body.classList.add('${theme}')\n </script>\n\n <ox-event-view mode=${mode} .eventProvider=${new SampleEventProvider()}> </ox-event-view>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n mode: 'monthly'\n}\n\nexport const WeeklyEventView = Template.bind({})\nWeeklyEventView.args = {\n mode: 'weekly'\n}\n"]}
|