@gez/date-time-kit
Version:
129 lines (128 loc) • 4.59 kB
JavaScript
var __freeze = Object.freeze;
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
var _a, _b, _c, _d, _e, _f, _g;
import {
UiBase
} from "../web-component-base/index.mjs";
import {
Ele as YyyyMmDdListGrpEle
} from "../yyyymmdd-list-grp/index.mjs";
import styleStr from "./index.css.mjs";
import html from "./index.html.mjs";
export class Ele extends UiBase {
constructor() {
super(...arguments);
__publicField(this, "_render", super._genRenderFn(() => {
const ms = this.millisecond;
this.$0(_d || (_d = __template(["dt-yyyymmdd-list-grp"]))).millisecond = ms;
this.$0(_e || (_e = __template([".title"]))).textContent = this.titleFormatter(ms);
}));
__publicField(this, "_onTitleToggle", (e) => {
const isOpen = e.detail;
e.stopPropagation();
this.$0(_f || (_f = __template([".wrapper"]))).classList.toggle("show-list", isOpen);
this.$0(_g || (_g = __template(["dt-yyyymmdd-list-grp"]))).scrollToCurrentItem();
this.dispatchEvent("popover-open-change", isOpen, true);
});
__publicField(this, "_onItemSelect", (e) => {
if (!(e.target instanceof YyyyMmDdListGrpEle)) return;
e.stopPropagation();
this.millisecond = e.target.millisecond;
});
__publicField(this, "_onBtnClick", (e) => {
if (!(e.target instanceof HTMLElement)) return;
const date = new Date(this.millisecond);
date.setDate(1);
if (e.target.matches(".add.year")) {
date.setFullYear(date.getFullYear() + 1);
} else if (e.target.matches(".sub.year")) {
date.setFullYear(date.getFullYear() - 1);
} else if (e.target.matches(".add.month")) {
date.setMonth(date.getMonth() + 1);
} else if (e.target.matches(".sub.month")) {
date.setMonth(date.getMonth() - 1);
}
this.millisecond = +date;
});
__publicField(this, "titleFormatter", (ms) => {
const date = new Date(ms);
const year = date.getFullYear();
const month = date.getMonth() + 1;
return "".concat((month < 10 ? "0" : "") + month, "/").concat(year);
});
}
static get observedAttributes() {
return [
...super.observedAttributes,
"millisecond",
"max-granularity",
"min-granularity",
"show-ctrl-btn-month-add",
"show-ctrl-btn-year-sub",
"show-ctrl-btn-month-add",
"show-ctrl-btn-month-sub"
];
}
get millisecond() {
return Math.floor(+this._getAttr("millisecond", "0"));
}
set millisecond(v) {
if (!Number.isSafeInteger(v)) return;
this.setAttribute("millisecond", "" + Math.floor(v));
}
get showCtrlBtnYearAdd() {
return this.hasAttribute("show-ctrl-btn-year-add");
}
set showCtrlBtnYearAdd(val) {
this.toggleAttribute("show-ctrl-btn-year-add", val);
}
get showCtrlBtnYearSub() {
return this.hasAttribute("show-ctrl-btn-year-sub");
}
set showCtrlBtnYearSub(val) {
this.toggleAttribute("show-ctrl-btn-year-sub", val);
}
get showCtrlBtnMonthAdd() {
return this.hasAttribute("show-ctrl-btn-month-add");
}
set showCtrlBtnMonthAdd(val) {
this.toggleAttribute("show-ctrl-btn-month-add", val);
}
get showCtrlBtnMonthSub() {
return this.hasAttribute("show-ctrl-btn-month-sub");
}
set showCtrlBtnMonthSub(val) {
this.toggleAttribute("show-ctrl-btn-month-sub", val);
}
connectedCallback() {
if (!super.connectedCallback()) return;
this._render();
this._bindEvt(_a || (_a = __template([".echo"])))("open-change", this._onTitleToggle);
this._bindEvt(_b || (_b = __template(["dt-yyyymmdd-list-grp"])))(
"change",
this._onItemSelect
);
this._bindEvt(_c || (_c = __template([".btn"])))("click", this._onBtnClick);
}
_onAttrChanged(name, oldValue, newValue) {
super._onAttrChanged(name, oldValue, newValue);
this._render();
if (name === "millisecond") {
this.dispatchEvent(
"change",
{
oldTime: new Date(Math.floor(+oldValue)),
newTime: new Date(Math.floor(+newValue))
},
true
);
}
}
}
__publicField(Ele, "tagName", "dt-yyyymm-nav");
__publicField(Ele, "_style", styleStr);
__publicField(Ele, "_template", html);
Ele.define();