duoyun-ui/elements/calendar.js

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m") throw new TypeError("Private method is not writable");
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _DuoyunCalendarElement_isHighlight, _DuoyunCalendarElement_dates;
var DuoyunCalendarElement_1;
import { adoptedStyle, customElement, emitter, property, boolattribute, part, } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css, classMap, partMap } from '@mantou/gem/lib/utils';
import { isNotNullish } from '../lib/types';
import { Time } from '../lib/time';
import { theme } from '../lib/theme';
import { commonHandle } from '../lib/hotkeys';
import { focusStyle } from '../lib/styles';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    font-size: 0.875em;
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-radius: ${theme.normalRound};
    border-color: ${theme.borderColor};
  }
  .day,
  .head {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: -1px;
    border: 1px solid;
    border-color: inherit;
  }
  .head {
    border-block-end-color: ${theme.lightBackgroundColor};
  }
  .head:first-of-type {
    border-start-start-radius: inherit;
  }
  .head:nth-of-type(7) {
    border-start-end-radius: inherit;
  }
  .day {
    position: relative;
    z-index: 1;
  }
  .day:where(:hover) {
    background: ${theme.hoverBackgroundColor};
  }
  .leftbottom {
    border-end-start-radius: inherit;
  }
  .day:last-of-type {
    border-end-end-radius: inherit;
  }
  .other {
    z-index: 0;
    color: ${theme.disabledColor};
  }
  .other:where(:hover) {
    background: ${theme.lightBackgroundColor};
  }
  .today {
    z-index: 2;
  }
  .today::before,
  .today::after {
    content: '';
    position: absolute;
    border-radius: inherit;
    margin: -1px;
    border: 1px solid ${theme.backgroundColor};
  }
  .today::before {
    inset: 2px;
  }
  .today::after {
    border-color: ${theme.primaryColor};
    inset: 0;
  }
  .highlight {
    z-index: 2;
    background: ${theme.primaryColor};
    color: ${theme.backgroundColor};
  }
  .start {
    border-start-start-radius: ${theme.smallRound};
    border-end-start-radius: ${theme.smallRound};
  }
  .stop {
    border-start-end-radius: ${theme.smallRound};
    border-end-end-radius: ${theme.smallRound};
  }
  :host([borderless]) {
    border: none;
    padding: 1px;
    border-radius: 0;
    border-color: transparent;
  }
`);
/**
 * @customElement dy-calendar
 * @attr borderless
 * @attr today
 */
let DuoyunCalendarElement = DuoyunCalendarElement_1 = class DuoyunCalendarElement extends GemElement {
    constructor() {
        super({ delegatesFocus: true });
        _DuoyunCalendarElement_isHighlight.set(this, (date) => {
            var _a;
            const t = date.valueOf();
            return !!((_a = this.highlights) === null || _a === void 0 ? void 0 : _a.some(([start, stop]) => t >= start && t <= stop));
        });
        _DuoyunCalendarElement_dates.set(this, void 0);
        this.willMount = () => {
            this.memo(() => {
                const today = new Time();
                const startTime = isNotNullish(this.position) ? new Time(this.position) : today;
                const start = new Time(startTime).startOf('M');
                const startDay = start.getDay();
                const stop = new Time(startTime).endOf('M');
                const stopDay = stop.getDay();
                const dates = [];
                for (let i = 0; i < startDay; i++) {
                    dates.push({ date: new Time(start).subtract(startDay - i, 'd') });
                }
                let s = start;
                while (s.valueOf() < stop.valueOf()) {
                    dates.push({ date: new Time(s), isThisMonth: true, isToday: today.isSome(s, 'd') });
                    s = new Time(s).add(1, 'd');
                }
                for (let i = 1; i < 7 - stopDay; i++) {
                    dates.push({ date: new Time(stop).add(i, 'd') });
                }
                __classPrivateFieldSet(this, _DuoyunCalendarElement_dates, dates, "f");
            }, () => [this.position]);
        };
        this.render = () => {
            return html `
      ${__classPrivateFieldGet(this, _DuoyunCalendarElement_dates, "f").slice(0, 7).map(({ date }, index) => html `
          <div
            class="head"
            part=${partMap({
                [DuoyunCalendarElement_1.headerRow]: true,
                [DuoyunCalendarElement_1.headerLeftCell]: index === 0,
                [DuoyunCalendarElement_1.headerRightCell]: index === 6,
            })}
          >
            ${date.format({ weekday: 'narrow' })}
          </div>
        `)}
      ${__classPrivateFieldGet(this, _DuoyunCalendarElement_dates, "f").map(({ date, isThisMonth, isToday }, index, arr) => {
                var _a, _b, _c;
                return html `
          <div
            tabindex="0"
            role="button"
            part=${partMap({
                    [DuoyunCalendarElement_1.dayCell]: true,
                    [DuoyunCalendarElement_1.todayCell]: !!isToday,
                    [DuoyunCalendarElement_1.otherDayCell]: !isThisMonth,
                    [DuoyunCalendarElement_1.leftTopCell]: index === 0,
                    [DuoyunCalendarElement_1.rightTopCell]: index === 6,
                    [DuoyunCalendarElement_1.leftBottomCell]: index === arr.length - 7,
                    [DuoyunCalendarElement_1.rightBottomCell]: index === arr.length - 1,
                })}
            class=${classMap({
                    day: true,
                    leftbottom: index === arr.length - 7,
                    ...(isThisMonth
                        ? {
                            today: this.today && !!isToday,
                            start: !!((_a = this.highlights) === null || _a === void 0 ? void 0 : _a.some(([d]) => date.isSome(d, 'd'))),
                            stop: !!((_b = this.highlights) === null || _b === void 0 ? void 0 : _b.some((ds) => date.isSome(ds[ds.length - 1], 'd'))),
                            highlight: __classPrivateFieldGet(this, _DuoyunCalendarElement_isHighlight, "f").call(this, date),
                        }
                        : {
                            other: true,
                        }),
                })}
            @click=${() => this.dateclick(date.valueOf())}
            @mouseover=${() => this.datehover(date.valueOf())}
            @keydown=${commonHandle}
          >
            <span part=${partMap({ date: true, todaydate: !!isToday })}>${date.getDate()}</span>
            ${(_c = this.renderDate) === null || _c === void 0 ? void 0 : _c.call(this, date)}
          </div>
        `;
            })}
    `;
        };
    }
};
_DuoyunCalendarElement_isHighlight = new WeakMap(), _DuoyunCalendarElement_dates = new WeakMap();
__decorate([
    emitter
], DuoyunCalendarElement.prototype, "datehover", void 0);
__decorate([
    emitter
], DuoyunCalendarElement.prototype, "dateclick", void 0);
__decorate([
    boolattribute
], DuoyunCalendarElement.prototype, "borderless", void 0);
__decorate([
    boolattribute
], DuoyunCalendarElement.prototype, "today", void 0);
__decorate([
    property
], DuoyunCalendarElement.prototype, "position", void 0);
__decorate([
    property
], DuoyunCalendarElement.prototype, "highlights", void 0);
__decorate([
    property
], DuoyunCalendarElement.prototype, "renderDate", void 0);
__decorate([
    part
], DuoyunCalendarElement, "headerRow", void 0);
__decorate([
    part
], DuoyunCalendarElement, "headerLeftCell", void 0);
__decorate([
    part
], DuoyunCalendarElement, "headerRightCell", void 0);
__decorate([
    part
], DuoyunCalendarElement, "dayCell", void 0);
__decorate([
    part
], DuoyunCalendarElement, "todayCell", void 0);
__decorate([
    part
], DuoyunCalendarElement, "otherDayCell", void 0);
__decorate([
    part
], DuoyunCalendarElement, "leftTopCell", void 0);
__decorate([
    part
], DuoyunCalendarElement, "rightTopCell", void 0);
__decorate([
    part
], DuoyunCalendarElement, "leftBottomCell", void 0);
__decorate([
    part
], DuoyunCalendarElement, "rightBottomCell", void 0);
DuoyunCalendarElement = DuoyunCalendarElement_1 = __decorate([
    customElement('dy-calendar'),
    adoptedStyle(style),
    adoptedStyle(focusStyle)
], DuoyunCalendarElement);
export { DuoyunCalendarElement };
//# sourceMappingURL=calendar.js.map