duoyun-ui/elements/date-picker.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 _DuoyunDatePickElement_instances, _DuoyunDatePickElement_value_get, _DuoyunDatePickElement_valueString_get, _DuoyunDatePickElement_onSubmit, _DuoyunDatePickElement_onOpen, _DuoyunDatePickElement_onClear;
import { connectStore, adoptedStyle, customElement, attribute, emitter, globalemitter, property, boolattribute, state, } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
import { Time } from '../lib/time';
import { theme } from '../lib/theme';
import { icons } from '../lib/icons';
import { locale } from '../lib/locale';
import { isNotNullish } from '../lib/types';
import { commonHandle } from '../lib/hotkeys';
import { focusStyle } from '../lib/styles';
import { ContextMenu } from './menu';
import { pickerStyle } from './picker';
import './use';
import './date-panel';
import './button';
const style = createCSSSheet(css `
  :host {
    width: 15em;
  }
  .value {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .placeholder {
    color: ${theme.describeColor};
  }
  .icon {
    display: flex;
  }
  .close,
  :host(:not([disabled])) .clearable:hover .date {
    display: none;
  }
  :host(:not([disabled])) .clearable:hover .close {
    display: inline-flex;
  }
`);
/**
 * @customElement dy-date-picker
 * @attr placeholder
 * @attr time
 * @attr clearable
 * @attr disabled
 * @fires change
 * @fires clear
 */
let DuoyunDatePickElement = class DuoyunDatePickElement extends GemElement {
    constructor() {
        super();
        _DuoyunDatePickElement_instances.add(this);
        _DuoyunDatePickElement_onSubmit.set(this, ({ detail }) => {
            this.change(detail);
            ContextMenu.close();
        });
        _DuoyunDatePickElement_onOpen.set(this, () => {
            if (this.disabled)
                return;
            let v = undefined;
            const onChange = ({ detail, target }) => {
                const panel = target;
                panel.highlights = [];
                panel.value = detail;
                const root = panel.getRootNode();
                const button = root.querySelector('dy-button');
                button.disabled = false;
                v = detail;
            };
            const onSubmit = () => {
                if (isNotNullish(v)) {
                    this.change(v);
                    ContextMenu.close();
                }
            };
            ContextMenu.open(html `
        <dy-date-panel
          style="border: none;"
          .value=${__classPrivateFieldGet(this, _DuoyunDatePickElement_instances, "a", _DuoyunDatePickElement_value_get)}
          ?time=${this.time}
          @change=${this.time ? onChange : __classPrivateFieldGet(this, _DuoyunDatePickElement_onSubmit, "f")}
        ></dy-date-panel>
        ${this.time
                ? html `
              <style>
                .footer {
                  margin-block-start: 2em;
                  display: flex;
                  justify-content: flex-end;
                }
              </style>
              <div class="footer">
                <dy-button disabled @click=${onSubmit} small>${locale.ok}</dy-button>
              </div>
            `
                : ''}
      `, {
                activeElement: this,
                width: this.time ? '30em' : undefined,
            });
        });
        _DuoyunDatePickElement_onClear.set(this, (e) => {
            e.stopPropagation();
            this.clear(null);
        });
        this.mounted = () => {
            return () => this.active && ContextMenu.close();
        };
        this.render = () => {
            return html `
      <div class=${classMap({ value: true, placeholder: !__classPrivateFieldGet(this, _DuoyunDatePickElement_instances, "a", _DuoyunDatePickElement_value_get) })}>${__classPrivateFieldGet(this, _DuoyunDatePickElement_instances, "a", _DuoyunDatePickElement_valueString_get) || this.placeholder}</div>
      <div class=${classMap({ icon: true, clearable: this.clearable })}>
        <dy-use class="date" .element=${icons.date}></dy-use>
        <dy-use class="close" @click=${__classPrivateFieldGet(this, _DuoyunDatePickElement_onClear, "f")} .element=${icons.close}></dy-use>
      </div>
    `;
        };
        this.addEventListener('click', __classPrivateFieldGet(this, _DuoyunDatePickElement_onOpen, "f"));
        this.addEventListener('keydown', commonHandle);
        this.tabIndex = 0;
        this.internals.role = 'combobox';
    }
    showPicker() {
        __classPrivateFieldGet(this, _DuoyunDatePickElement_onOpen, "f").call(this);
    }
};
_DuoyunDatePickElement_onSubmit = new WeakMap(), _DuoyunDatePickElement_onOpen = new WeakMap(), _DuoyunDatePickElement_onClear = new WeakMap(), _DuoyunDatePickElement_instances = new WeakSet(), _DuoyunDatePickElement_value_get = function _DuoyunDatePickElement_value_get() {
    return isNotNullish(this.value) ? this.value : undefined;
}, _DuoyunDatePickElement_valueString_get = function _DuoyunDatePickElement_valueString_get() {
    return __classPrivateFieldGet(this, _DuoyunDatePickElement_instances, "a", _DuoyunDatePickElement_value_get) && new Time(__classPrivateFieldGet(this, _DuoyunDatePickElement_instances, "a", _DuoyunDatePickElement_value_get)).format(this.time ? undefined : 'YYYY-MM-DD');
};
__decorate([
    attribute
], DuoyunDatePickElement.prototype, "placeholder", void 0);
__decorate([
    boolattribute
], DuoyunDatePickElement.prototype, "time", void 0);
__decorate([
    boolattribute
], DuoyunDatePickElement.prototype, "clearable", void 0);
__decorate([
    boolattribute
], DuoyunDatePickElement.prototype, "disabled", void 0);
__decorate([
    state
], DuoyunDatePickElement.prototype, "active", void 0);
__decorate([
    property
], DuoyunDatePickElement.prototype, "value", void 0);
__decorate([
    globalemitter
], DuoyunDatePickElement.prototype, "change", void 0);
__decorate([
    emitter
], DuoyunDatePickElement.prototype, "clear", void 0);
DuoyunDatePickElement = __decorate([
    customElement('dy-date-picker'),
    adoptedStyle(pickerStyle),
    adoptedStyle(style),
    adoptedStyle(focusStyle),
    connectStore(icons)
], DuoyunDatePickElement);
export { DuoyunDatePickElement };
//# sourceMappingURL=date-picker.js.map