duoyun-ui/elements/date-panel.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 __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 _DuoyunDatePanelElement_instances, _DuoyunDatePanelElement_currentPosition_get, _DuoyunDatePanelElement_prevPosition_get, _DuoyunDatePanelElement_highlights_get, _DuoyunDatePanelElement_increaseView, _DuoyunDatePanelElement_onChangeView, _DuoyunDatePanelElement_initState, _DuoyunDatePanelElement_onChange, _DuoyunDatePanelElement_onTimeChange, _DuoyunDatePanelElement_renderCurrentPosition, _DuoyunDatePanelElement_renderMonthList, _DuoyunDatePanelElement_renderYearList;
import { adoptedStyle, customElement, emitter, globalemitter, property, boolattribute, } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
import { isNotNullish } from '../lib/types';
import { theme } from '../lib/theme';
import { Time } from '../lib/time';
import { icons } from '../lib/icons';
import { commonHandle } from '../lib/hotkeys';
import { focusStyle } from '../lib/styles';
import './use';
import './calendar';
import './divider';
import './action-text';
import './time-panel';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    font-size: 0.875em;
    display: flex;
    border: 1px solid ${theme.borderColor};
    border-radius: ${theme.normalRound};
    gap: 0.5em;
  }
  .datepanel {
    width: 0;
    flex-grow: 20;
  }
  .head {
    aspect-ratio: 7 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .current {
    flex-grow: 1;
    text-align: center;
  }
  .button {
    max-width: 10%;
  }
  .button:hover {
    background-color: ${theme.hoverBackgroundColor};
  }
  .container {
    position: relative;
  }
  .calendar {
    gap: 3px 1px;
  }
  .calendar.hidden {
    visibility: hidden;
  }
  .list {
    position: absolute;
    inset: 0;
    display: grid;
    grid: auto-flow / 1fr 1fr 1fr;
  }
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    outline: 1px solid transparent;
    outline-offset: -0.5em;
  }
  .item.highlight {
    z-index: 1;
    outline-color: ${theme.highlightColor};
  }
  .item:hover {
    background: ${theme.hoverBackgroundColor};
  }
  .separate {
    color: ${theme.lightBackgroundColor};
    margin-inline: 0.5em;
  }
  .timepanelwrap {
    width: 0;
    flex-grow: 10;
    display: flex;
    flex-direction: column;
  }
  .time {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3em;
  }
  .timepanel {
    height: 0;
    flex-grow: 1;
  }
`);
const modes = ['day', 'month', 'year'];
/**
 * @customElement dy-date-panel
 * @attr time
 * @fires change
 * @fires datehover
 */
let DuoyunDatePanelElement = class DuoyunDatePanelElement extends GemElement {
    constructor() {
        super({ delegatesFocus: true });
        _DuoyunDatePanelElement_instances.add(this);
        this.state = {
            year: 0,
            month: 0,
            mode: 'day',
        };
        _DuoyunDatePanelElement_increaseView.set(this, (number) => {
            const date = __classPrivateFieldGet(this, _DuoyunDatePanelElement_instances, "a", _DuoyunDatePanelElement_currentPosition_get);
            switch (this.state.mode) {
                case 'day':
                    date.add(number, 'M');
                    break;
                case 'month':
                    date.add(number, 'Y');
                    break;
                case 'year':
                    date.add(number * 12, 'Y');
                    break;
            }
            __classPrivateFieldGet(this, _DuoyunDatePanelElement_initState, "f").call(this, date.valueOf());
        });
        _DuoyunDatePanelElement_onChangeView.set(this, (state) => {
            this.setState({ ...state, mode: 'day' });
        });
        _DuoyunDatePanelElement_initState.set(this, (value) => {
            const d = new Time(value);
            this.setState({ year: d.getFullYear(), month: d.getMonth() });
        });
        _DuoyunDatePanelElement_onChange.set(this, (evt) => {
            evt.stopPropagation();
            const v = new Time(evt.detail);
            if (this.time) {
                const t = new Time(isNotNullish(this.value) ? this.value : new Time().startOf('d'));
                v.setHours(t.getHours());
                v.setMinutes(t.getMinutes());
                v.setSeconds(t.getSeconds());
            }
            __classPrivateFieldGet(this, _DuoyunDatePanelElement_initState, "f").call(this, v.valueOf());
            this.change(v.valueOf());
        });
        _DuoyunDatePanelElement_onTimeChange.set(this, (evt) => {
            evt.stopPropagation();
            __classPrivateFieldGet(this, _DuoyunDatePanelElement_initState, "f").call(this, evt.detail);
            this.change(evt.detail);
        });
        _DuoyunDatePanelElement_renderCurrentPosition.set(this, () => {
            switch (this.state.mode) {
                case 'day':
                    return html `${__classPrivateFieldGet(this, _DuoyunDatePanelElement_instances, "a", _DuoyunDatePanelElement_currentPosition_get).formatToParts().map(({ type, value }) => {
                        if (modes.includes(type)) {
                            const mode = type;
                            return html `<dy-action-text @click=${() => this.setState({ mode })}>${value}</dy-action-text>`;
                        }
                        return value;
                    })}`;
                default:
                    return html `
          <dy-action-text @click=${() => this.setState({ mode: 'day' })}>
            ${__classPrivateFieldGet(this, _DuoyunDatePanelElement_instances, "a", _DuoyunDatePanelElement_currentPosition_get).format('YYYY-MM-DD')}
          </dy-action-text>
        `;
            }
        });
        _DuoyunDatePanelElement_renderMonthList.set(this, () => {
            const start = new Time().startOf('Y');
            const isCurrentYear = isNotNullish(this.value) && new Time(this.value).getFullYear() === this.state.year;
            return html `
      <div class="list">
        ${Array.from({ length: 12 }).map((_, index) => html `
            <span
              class=${classMap({
                item: true,
                highlight: isCurrentYear && index === this.state.month,
            })}
              @click=${() => __classPrivateFieldGet(this, _DuoyunDatePanelElement_onChangeView, "f").call(this, { month: index })}
            >
              ${Object.fromEntries(new Time(start)
                .add(index, 'M')
                .formatToParts()
                .map(({ type, value }) => [type, value])).month}
            </span>
          `)}
      </div>
    `;
        });
        _DuoyunDatePanelElement_renderYearList.set(this, () => {
            const currentYear = isNotNullish(this.value) && new Time(this.value).getFullYear();
            return html `
      <div class="list">
        ${Array.from({ length: 12 }, (_, index) => this.state.year - 7 + index).map((year) => html `
            <span
              class=${classMap({
                item: true,
                highlight: currentYear === year,
            })}
              @click=${() => __classPrivateFieldGet(this, _DuoyunDatePanelElement_onChangeView, "f").call(this, { year })}
            >
              ${year}
            </span>
          `)}
      </div>
    `;
        });
        this.willMount = () => {
            __classPrivateFieldGet(this, _DuoyunDatePanelElement_initState, "f").call(this, isNotNullish(this.value) ? this.value : this.initValue || Time.now());
            this.memo(() => {
                if (this.state.mode !== 'day') {
                    this.state.old = {
                        month: this.state.month,
                        year: this.state.year,
                    };
                }
                else {
                    this.state.old = undefined;
                }
            }, () => [this.state.mode]);
        };
        this.mounted = () => {
            this.effect(() => {
                if (isNotNullish(this.initValue))
                    __classPrivateFieldGet(this, _DuoyunDatePanelElement_initState, "f").call(this, this.initValue);
            }, () => [this.initValue]);
        };
        this.render = () => {
            const { mode } = this.state;
            return html `
      <div class="datepanel">
        <div class="head">
          <dy-use
            class="button"
            tabindex="0"
            role="button"
            @keydown=${commonHandle}
            @click=${() => __classPrivateFieldGet(this, _DuoyunDatePanelElement_increaseView, "f").call(this, -1)}
            .element=${icons.left}
          ></dy-use>
          <div class="current">${__classPrivateFieldGet(this, _DuoyunDatePanelElement_renderCurrentPosition, "f").call(this)}</div>
          <dy-use
            class="button"
            tabindex="0"
            role="button"
            @keydown=${commonHandle}
            @click=${() => __classPrivateFieldGet(this, _DuoyunDatePanelElement_increaseView, "f").call(this, 1)}
            .element=${icons.right}
          ></dy-use>
        </div>
        <div class="container">
          <dy-calendar
            class=${classMap({ calendar: true, hidden: mode !== 'day' })}
            borderless
            today
            .position=${mode === 'day' ? __classPrivateFieldGet(this, _DuoyunDatePanelElement_instances, "a", _DuoyunDatePanelElement_currentPosition_get).valueOf() : __classPrivateFieldGet(this, _DuoyunDatePanelElement_instances, "a", _DuoyunDatePanelElement_prevPosition_get).valueOf()}
            .highlights=${__classPrivateFieldGet(this, _DuoyunDatePanelElement_instances, "a", _DuoyunDatePanelElement_highlights_get)}
            @datehover=${({ detail }) => this.datehover(detail)}
            @dateclick=${__classPrivateFieldGet(this, _DuoyunDatePanelElement_onChange, "f")}
          ></dy-calendar>
          ${mode === 'month' ? __classPrivateFieldGet(this, _DuoyunDatePanelElement_renderMonthList, "f").call(this) : ''} ${mode === 'year' ? __classPrivateFieldGet(this, _DuoyunDatePanelElement_renderYearList, "f").call(this) : ''}
        </div>
      </div>
      ${this.time
                ? html `
            <dy-divider class="separate" orientation="vertical"></dy-divider>
            <div class="timepanelwrap">
              <div class="time">${isNotNullish(this.value) ? new Time(this.value).format('HH:mm:ss') : ''}</div>
              <dy-divider class="separate"></dy-divider>
              <dy-time-panel
                class="timepanel"
                .value=${this.value}
                @change=${__classPrivateFieldGet(this, _DuoyunDatePanelElement_onTimeChange, "f")}
                headless
              ></dy-time-panel>
            </div>
          `
                : ''}
    `;
        };
        this.internals.role = 'widget';
    }
};
_DuoyunDatePanelElement_increaseView = new WeakMap(), _DuoyunDatePanelElement_onChangeView = new WeakMap(), _DuoyunDatePanelElement_initState = new WeakMap(), _DuoyunDatePanelElement_onChange = new WeakMap(), _DuoyunDatePanelElement_onTimeChange = new WeakMap(), _DuoyunDatePanelElement_renderCurrentPosition = new WeakMap(), _DuoyunDatePanelElement_renderMonthList = new WeakMap(), _DuoyunDatePanelElement_renderYearList = new WeakMap(), _DuoyunDatePanelElement_instances = new WeakSet(), _DuoyunDatePanelElement_currentPosition_get = function _DuoyunDatePanelElement_currentPosition_get() {
    return new Time(`${this.state.year}-${String(this.state.month + 1).padStart(2, '0')}`);
}, _DuoyunDatePanelElement_prevPosition_get = function _DuoyunDatePanelElement_prevPosition_get() {
    if (!this.state.old)
        return 0;
    return new Time(`${this.state.old.year}-${String(this.state.old.month + 1).padStart(2, '0')}`);
}, _DuoyunDatePanelElement_highlights_get = function _DuoyunDatePanelElement_highlights_get() {
    const highlights = [...(this.highlights || [])];
    const value = this.value;
    if (isNotNullish(value) && !highlights.some(([start, stop]) => value >= start && value <= stop)) {
        const t = new Time(value);
        highlights.push([t.startOf('d').valueOf(), t.endOf('d').valueOf()]);
    }
    return highlights;
};
__decorate([
    boolattribute
], DuoyunDatePanelElement.prototype, "time", void 0);
__decorate([
    globalemitter
], DuoyunDatePanelElement.prototype, "change", void 0);
__decorate([
    emitter
], DuoyunDatePanelElement.prototype, "datehover", void 0);
__decorate([
    property
], DuoyunDatePanelElement.prototype, "value", void 0);
__decorate([
    property
], DuoyunDatePanelElement.prototype, "highlights", void 0);
__decorate([
    property
], DuoyunDatePanelElement.prototype, "initValue", void 0);
DuoyunDatePanelElement = __decorate([
    customElement('dy-date-panel'),
    adoptedStyle(style),
    adoptedStyle(focusStyle)
], DuoyunDatePanelElement);
export { DuoyunDatePanelElement };
//# sourceMappingURL=date-panel.js.map