chuijs 4.0.2 → 4.0.3

package/framework/components/chui_alert/alert.js

@@ -1,8 +1,8 @@
-const {setStyles, markdownToHtml, optionOr} = require("../../modules/chui_functions");
-const {Icon, Icons} = require("../chui_icons/icons");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles, markdownToHtml, optionOr } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 // Плашка значка — общая с уведомлениями: одна фигура и одни цвета состояния
-const {setStatusPlate} = require("../chui_notification/status_plate");
+const { setStatusPlate } = require("../chui_notification/status_plate");
 
 /**
  * Сообщение в потоке страницы: подсказка, предупреждение или ошибка прямо в разметке, а не
@@ -34,7 +34,7 @@ class Alert {
         INFO: "alert_info",
         SUCCESS: "alert_success",
         WARNING: "alert_warning",
-        ERROR: "alert_error"
+        ERROR: "alert_error",
     };
     static #counter = 0;
 
@@ -50,12 +50,20 @@ class Alert {
     #dismissed = false;
     #custom_icon = false;
 
-    constructor(options = {
-        id: String(), title: String(), markdownTitle: String(),
-        text: String(), markdownText: String(),
-        style: String(), icon: undefined, dismissible: Boolean(),
-        actions: [], margin: Object()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            markdownTitle: String(),
+            text: String(),
+            markdownText: String(),
+            style: String(),
+            icon: undefined,
+            dismissible: Boolean(),
+            actions: [],
+            margin: Object(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Alert");
         Alert.#counter += 1;
         this.#id = options.id === undefined ? `chui_alert_${Alert.#counter}` : options.id;
@@ -119,7 +127,8 @@ class Alert {
         this.#root.setAttribute("aria-live", assertive ? "assertive" : "polite");
         // Цвет и глиф плашки выбирает общий помощник семьи — по ключу стиля (`alert_error` → `error`).
         // Своя иконка (`setIcon`) важнее статусного глифа и остаётся собой
-        if (this.#custom_icon === false) setStatusPlate(this.#icon, typeof style === "string" ? style.replace("alert_", "") : undefined);
+        if (this.#custom_icon === false)
+            setStatusPlate(this.#icon, typeof style === "string" ? style.replace("alert_", "") : undefined);
         return this;
     }
 
@@ -216,7 +225,7 @@ class Alert {
     }
 
     /** Отступы сообщения: {top, bottom, left, right} — как у `Divider.setMargin()` */
-    setMargin(margin = {top: undefined, bottom: undefined, left: undefined, right: undefined}) {
+    setMargin(margin = { top: undefined, bottom: undefined, left: undefined, right: undefined }) {
         if (margin.top !== undefined) this.#root.style.marginTop = margin.top;
         if (margin.bottom !== undefined) this.#root.style.marginBottom = margin.bottom;
         if (margin.left !== undefined) this.#root.style.marginLeft = margin.left;
@@ -238,4 +247,4 @@ class Alert {
     }
 }
 
-exports.Alert = Alert
+exports.Alert = Alert;

package/framework/components/chui_avatar/avatar.js

@@ -1,5 +1,5 @@
-const {setStyles} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Аватар: изображение пользователя или его инициалы, при необходимости со значком состояния.
@@ -22,26 +22,26 @@ const {I18n} = require('../../modules/chui_i18n/chui_i18n');
 class Avatar {
     static SHAPE = {
         CIRCLE: "circle",
-        SQUARE: "square"
+        SQUARE: "square",
     };
     static SIZE = {
         SMALL: "28px",
         DEFAULT: "40px",
         LARGE: "56px",
-        BIG: "72px"
+        BIG: "72px",
     };
     static STATUS = {
         ONLINE: "online",
         OFFLINE: "offline",
         BUSY: "busy",
-        AWAY: "away"
+        AWAY: "away",
     };
     static get STATUS_LABEL() {
         return {
             online: I18n.t("feedback.statusOnline"),
             offline: I18n.t("feedback.statusOffline"),
             busy: I18n.t("feedback.statusBusy"),
-            away: I18n.t("feedback.statusAway")
+            away: I18n.t("feedback.statusAway"),
         };
     }
     static #counter = 0;
@@ -59,18 +59,20 @@ class Avatar {
     #decorative = false;
     #click_listeners = [];
 
-    constructor(options = {
-        id: String(),
-        name: String(),
-        initials: String(),
-        image: Object(),
-        size: String(),
-        shape: String(),
-        status: String(),
-        label: String(),
-        decorative: Boolean(),
-        clickListener: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            initials: String(),
+            image: Object(),
+            size: String(),
+            shape: String(),
+            status: String(),
+            label: String(),
+            decorative: Boolean(),
+            clickListener: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Avatar");
         Avatar.#counter += 1;
         this.#id = options.id === undefined ? `chui_avatar_${Avatar.#counter}` : options.id;
@@ -255,9 +257,8 @@ class Avatar {
         }
         this.#root.removeAttribute("aria-hidden");
         this.#root.setAttribute("role", "img");
-        const base = this.#label === undefined
-            ? (this.#name === undefined ? this.#deriveInitials() : this.#name)
-            : this.#label;
+        const base =
+            this.#label === undefined ? (this.#name === undefined ? this.#deriveInitials() : this.#name) : this.#label;
         const status = this.#status === undefined ? undefined : Avatar.STATUS_LABEL[this.#status];
         this.#root.setAttribute("aria-label", status === undefined ? base : `${base}, ${status}`);
     }
@@ -267,4 +268,4 @@ class Avatar {
     };
 }
 
-exports.Avatar = Avatar
+exports.Avatar = Avatar;

package/framework/components/chui_avatar_group/avatar_group.js

@@ -1,7 +1,7 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {Avatar} = require('../chui_avatar/avatar');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
-const {makeKeyboardButton} = require('../../modules/chui_a11y/chui_a11y');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { Avatar } = require("../chui_avatar/avatar");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
 
 /**
  * Группа аватаров: несколько участников в ряд с нахлёстом и счётчиком скрытых.
@@ -48,15 +48,17 @@ class AvatarGroup {
     #extra_listener = undefined;
     #label = undefined;
 
-    constructor(options = {
-        id: String(),
-        avatars: [],
-        max: Number(),
-        size: String(),
-        shape: String(),
-        label: String(),
-        extraClickListener: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            avatars: [],
+            max: Number(),
+            size: String(),
+            shape: String(),
+            label: String(),
+            extraClickListener: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_AvatarGroup");
         AvatarGroup.#counter += 1;
         this.#id = optionOr(options.id, `chui_avatar_group_${AvatarGroup.#counter}`);
@@ -187,13 +189,13 @@ class AvatarGroup {
     #push(item = undefined) {
         if (item === undefined || item === null) return;
         if (item instanceof Element) {
-            this.#entries.push({node: item, avatar: undefined});
+            this.#entries.push({ node: item, avatar: undefined });
             return;
         }
         const avatar = item instanceof Avatar ? item : new Avatar(item);
         if (this.#size !== undefined) avatar.setSize(this.#size);
         if (this.#shape !== undefined) avatar.setShape(this.#shape);
-        this.#entries.push({node: avatar.set(), avatar: avatar});
+        this.#entries.push({ node: avatar.set(), avatar: avatar });
     }
 
     #sync() {
@@ -215,11 +217,11 @@ class AvatarGroup {
         extra.innerText = `+${hidden}`;
         if (this.#extra_listener === undefined) {
             extra.setAttribute("role", "img");
-            extra.setAttribute("aria-label", I18n.t("feedback.avatarGroupMore", {count: hidden}));
+            extra.setAttribute("aria-label", I18n.t("feedback.avatarGroupMore", { count: hidden }));
         } else {
             // Кнопка: Enter/Space посылает click, поэтому обработчик один
             extra.classList.add("avatar_group_extra_button");
-            extra.setAttribute("aria-label", I18n.t("feedback.avatarGroupShowAll", {count: hidden}));
+            extra.setAttribute("aria-label", I18n.t("feedback.avatarGroupShowAll", { count: hidden }));
             makeKeyboardButton(extra);
             extra.addEventListener("click", (event) => this.#extra_listener(event, hidden, this));
         }
@@ -228,9 +230,9 @@ class AvatarGroup {
     }
 
     #syncAria() {
-        const name = optionOr(this.#label, I18n.t("feedback.avatarGroupCount", {count: this.#entries.length}));
+        const name = optionOr(this.#label, I18n.t("feedback.avatarGroupCount", { count: this.#entries.length }));
         this.#root.setAttribute("aria-label", name);
     }
 }
 
-exports.AvatarGroup = AvatarGroup
+exports.AvatarGroup = AvatarGroup;

package/framework/components/chui_backtop/backtop.js

@@ -1,6 +1,6 @@
-const {setStyles, optionOr, scrollParent} = require('../../modules/chui_functions');
-const {Icon, Icons} = require('../chui_icons/icons');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr, scrollParent } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Кнопка «наверх»: появляется, когда контейнер прокручен дальше порога, и возвращает его к началу.
@@ -32,7 +32,7 @@ const {I18n} = require('../../modules/chui_i18n/chui_i18n');
 class Backtop {
     static POSITION = {
         FIXED: "fixed",
-        STICKY: "sticky"
+        STICKY: "sticky",
     };
     static #counter = 0;
     static #DEFAULT_THRESHOLD = 200;
@@ -50,11 +50,19 @@ class Backtop {
     #visible = false;
     #destroyed = false;
 
-    constructor(options = {
-        id: String(), target: undefined, threshold: Number(),
-        position: String(), bottom: String(), inlineEnd: String(),
-        title: String(), icon: undefined, smooth: Boolean()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            target: undefined,
+            threshold: Number(),
+            position: String(),
+            bottom: String(),
+            inlineEnd: String(),
+            title: String(),
+            icon: undefined,
+            smooth: Boolean(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Backtop");
         Backtop.#counter += 1;
         this.#id = optionOr(options.id, `chui_backtop_${Backtop.#counter}`);
@@ -74,7 +82,7 @@ class Backtop {
         this.setTitle(options.title);
         this.setIcon(options.icon);
         this.setSmooth(options.smooth !== false);
-        window.addEventListener("scroll", this.#onScroll, {capture: true, passive: true});
+        window.addEventListener("scroll", this.#onScroll, { capture: true, passive: true });
     }
 
     // GET
@@ -150,9 +158,14 @@ class Backtop {
 
     /** Свой значок (имя из `Icons`, `Icon`, узел или компонент); `undefined` — стрелка вверх */
     setIcon(icon = undefined) {
-        const node = icon === undefined || icon === null || icon === ""
-            ? new Icon(Icons.NAVIGATION.ARROW_UPWARD, "18px").set()
-            : (typeof icon === "string" ? new Icon(icon, "18px").set() : (typeof icon.set === "function" ? icon.set() : icon));
+        const node =
+            icon === undefined || icon === null || icon === ""
+                ? new Icon(Icons.NAVIGATION.ARROW_UPWARD, "18px").set()
+                : typeof icon === "string"
+                  ? new Icon(icon, "18px").set()
+                  : typeof icon.set === "function"
+                    ? icon.set()
+                    : icon;
         this.#icon.innerHTML = "";
         this.#icon.appendChild(node);
         return this;
@@ -175,8 +188,8 @@ class Backtop {
         const container = this.#resolveTarget();
         if (container === undefined) return this;
         const behavior = this.#smooth && Backtop.#reducedMotion() === false ? "smooth" : "auto";
-        if (container === document.scrollingElement) window.scrollTo({top: 0, behavior: behavior});
-        else container.scrollTo({top: 0, behavior: behavior});
+        if (container === document.scrollingElement) window.scrollTo({ top: 0, behavior: behavior });
+        else container.scrollTo({ top: 0, behavior: behavior });
         return this;
     }
 
@@ -184,7 +197,7 @@ class Backtop {
     destroy() {
         if (this.#destroyed) return this;
         this.#destroyed = true;
-        window.removeEventListener("scroll", this.#onScroll, {capture: true});
+        window.removeEventListener("scroll", this.#onScroll, { capture: true });
         this.#root.remove();
         return this;
     }
@@ -196,8 +209,11 @@ class Backtop {
 
     // === ВНУТРЕННЕЕ ===
     static #reducedMotion() {
-        return typeof window !== "undefined" && typeof window.matchMedia === "function" &&
-            window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        return (
+            typeof window !== "undefined" &&
+            typeof window.matchMedia === "function" &&
+            window.matchMedia("(prefers-reduced-motion: reduce)").matches
+        );
     }
 
     /** Контейнер прокрутки: свой `target`, иначе ближайший прокручиваемый предок кнопки */
@@ -227,4 +243,4 @@ class Backtop {
     }
 }
 
-exports.Backtop = Backtop
+exports.Backtop = Backtop;

package/framework/components/chui_badge/badge.js

@@ -1,14 +1,16 @@
-const {setStyles, markdownToHtml, htmlToMarkdown, optionOr} = require("../../modules/chui_functions");
+const { setStyles, markdownToHtml, htmlToMarkdown, optionOr } = require("../../modules/chui_functions");
 
 class Badge {
     #chui_badge = document.createElement(`chui_badge`);
-    constructor(options = {
-        id: String(),
-        text: String(),
-        markdownText: String(),
-        style: undefined
-    }) {
-        setStyles(__dirname + "/styles.css", 'chUiJS_Badge');
+    constructor(
+        options = {
+            id: String(),
+            text: String(),
+            markdownText: String(),
+            style: undefined,
+        }
+    ) {
+        setStyles(__dirname + "/styles.css", "chUiJS_Badge");
         if (options.id !== undefined) this.#chui_badge.id = options.id;
         const style = optionOr(options.style, undefined);
         if (style !== undefined) this.#chui_badge.classList.add(style);
@@ -52,10 +54,10 @@ class Badge {
         return this.#chui_badge;
     }
     static STYLE = {
-        ERROR: 'badge_error',
-        SUCCESS: 'badge_success',
-        WARNING: 'badge_warning'
-    }
+        ERROR: "badge_error",
+        SUCCESS: "badge_success",
+        WARNING: "badge_warning",
+    };
 }
 
-exports.Badge = Badge
+exports.Badge = Badge;

package/framework/components/chui_breadcrumb/breadcrumb.js

@@ -1,7 +1,7 @@
-const {setStyles, optionOr} = require("../../modules/chui_functions");
-const {Icon, Icons} = require("../chui_icons/icons");
-const {Link} = require("../chui_link/link");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { Link } = require("../chui_link/link");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Навигационная цепочка: путь от корня к текущему месту с переходом по звеньям.
@@ -25,7 +25,7 @@ const {I18n} = require("../../modules/chui_i18n/chui_i18n");
 class Breadcrumb {
     static SIZE = {
         SMALL: "small",
-        DEFAULT: "default"
+        DEFAULT: "default",
     };
     static #counter = 0;
 
@@ -34,12 +34,14 @@ class Breadcrumb {
     #items = [];
     #id = undefined;
 
-    constructor(options = {
-        id: String(),
-        items: [],
-        size: String(),
-        label: String()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            items: [],
+            size: String(),
+            label: String(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Breadcrumb");
         Breadcrumb.#counter += 1;
         this.#id = options.id === undefined ? `chui_breadcrumb_${Breadcrumb.#counter}` : options.id;
@@ -121,7 +123,7 @@ class Breadcrumb {
             node.appendChild(text);
             return node;
         }
-        const link = new Link({text: item.title, href: item.href, clickEvent: item.clickEvent, icon: item.icon});
+        const link = new Link({ text: item.title, href: item.href, clickEvent: item.clickEvent, icon: item.icon });
         node.appendChild(link.set());
         return node;
     }
@@ -140,4 +142,4 @@ class Breadcrumb {
     static ICON_SIZE = "14px";
 }
 
-exports.Breadcrumb = Breadcrumb
+exports.Breadcrumb = Breadcrumb;

package/framework/components/chui_button/button.js

@@ -1,21 +1,31 @@
-const {Icon} = require("../chui_icons/icons");
+const { Icon } = require("../chui_icons/icons");
 
 class Button {
-    #chui_button = document.createElement('chui_button');
-    #button = document.createElement('button');
-    #button_text = document.createElement('button_text');
-    #button_icon = document.createElement('button_icon');
+    #chui_button = document.createElement("chui_button");
+    #button = document.createElement("button");
+    #button_text = document.createElement("button_text");
+    #button_icon = document.createElement("button_icon");
     #label_text = undefined;
-    constructor(options = { reverse: Boolean(), title: String(), icon: undefined, label: String(), disabled: Boolean(), clickEvent: () => {} }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", "chUiJS_Button")
+    constructor(
+        options = {
+            reverse: Boolean(),
+            title: String(),
+            icon: undefined,
+            label: String(),
+            disabled: Boolean(),
+            clickEvent: () => {},
+        }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Button");
 
-        this.#button.className = "chui_button"
-        this.#button_text.className = "chui_button_text"
+        this.#button.className = "chui_button";
+        this.#button_text.className = "chui_button_text";
         // Иконка декоративна: иначе её глиф-имя («print», «delete»…) попадает в имя кнопки
         this.#button_icon.setAttribute("aria-hidden", "true");
 
         if (options.title !== undefined) this.#button_text.innerText = options.title;
-        if (options.icon !== undefined) this.#button_icon.innerHTML = new Icon(options.icon, "var(--header_icon_size)").getHTML();
+        if (options.icon !== undefined)
+            this.#button_icon.innerHTML = new Icon(options.icon, "var(--header_icon_size)").getHTML();
 
         if (options.title !== undefined && options.icon === undefined) {
             this.#button.appendChild(this.#button_text);
@@ -35,28 +45,33 @@ class Button {
             }
         }
 
-        if (options.clickEvent !== undefined) this.#button.addEventListener('click', options.clickEvent);
+        if (options.clickEvent !== undefined) this.#button.addEventListener("click", options.clickEvent);
         this.#button.addEventListener("mousedown", () => {
-            return false
-        })
-        this.#chui_button.appendChild(this.#button)
+            return false;
+        });
+        this.#chui_button.appendChild(this.#button);
         // Доступное имя кнопки без надписи: значок декоративен (`aria-hidden`) и имени не даёт,
         // поэтому кнопка только со значком оставалась бы без имени
         if (options.label !== undefined) this.setLabel(options.label);
         // `disabled` в опциях — то же, что setDisabled(true): без этого опция молча терялась
         if (options.disabled === true) this.setDisabled(true);
     }
-    getText() { return this.#button_text.innerText; }
+    getText() {
+        return this.#button_text.innerText;
+    }
     /** Новый текст. Пишем в `button_text`, а не в саму кнопку: запись в кнопку целиком
      *  затирала бы и значок, и его разметку (`aria-hidden`), а `getText()` читал бы старый узел */
     setText(text = String()) {
         this.#button_text.innerText = text;
         // Пустой узел в разметку не дописываем: кнопке только со значком он ничего не даёт
-        if (String(text) !== "" && !this.#button.contains(this.#button_text)) this.#button.appendChild(this.#button_text);
+        if (String(text) !== "" && !this.#button.contains(this.#button_text))
+            this.#button.appendChild(this.#button_text);
         this.#syncLabel();
         return this;
     }
-    getLabel() { return this.#label_text; }
+    getLabel() {
+        return this.#label_text;
+    }
     /** Доступное имя кнопки без видимой надписи; `undefined` его убирает.
      *  Пока надпись есть, имя даёт она сама — `aria-label` тогда не ставится и не подменяет её */
     setLabel(label = undefined) {
@@ -67,14 +82,19 @@ class Button {
     /** Имя кнопки: из видимой надписи, а если её нет — из `label` */
     #syncLabel() {
         const hasText = this.#button.contains(this.#button_text) && this.#button_text.innerText.trim() !== "";
-        if (hasText || this.#label_text === undefined || this.#label_text === "") this.#button.removeAttribute("aria-label");
+        if (hasText || this.#label_text === undefined || this.#label_text === "")
+            this.#button.removeAttribute("aria-label");
         else this.#button.setAttribute("aria-label", String(this.#label_text));
     }
-    addClickListener(listener = () => {}) { this.#button.addEventListener('click', listener); }
+    addClickListener(listener = () => {}) {
+        this.#button.addEventListener("click", listener);
+    }
     setDisabled(boolean = Boolean()) {
-        this.#button.disabled = boolean
+        this.#button.disabled = boolean;
+    }
+    set() {
+        return this.#chui_button;
     }
-    set() { return this.#chui_button; }
 }
 
-exports.Button = Button
+exports.Button = Button;

package/framework/components/chui_button/styles.css

@@ -45,7 +45,7 @@ chui_button {
     background: var(--blue_prime_background);
     border-color: var(--button_border_color_hover);
     /* Лёгкая усадка: нажатие читается даже тогда, когда заливка уже акцентная */
-    transform: scale(.97);
+    transform: scale(0.97);
 }
 
 .chui_button_text {
@@ -97,4 +97,4 @@ chui_button {
 
 .chui_button:disabled:hover button_icon chui_icon {
     color: var(--text_color_disabled);
-}
+}

package/framework/components/chui_calendar/calendar.js

@@ -1,4 +1,4 @@
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 class Calendar {
     constructor(year, month) {
@@ -11,14 +11,16 @@ class Calendar {
             new Array(7),
             new Array(7),
             new Array(7),
-            new Array(7)
+            new Array(7),
         ];
 
         // Названия дней недели берёт локаль текущего языка (воскресенье — 0):
         // семь подряд идущих дней месяца покрывают все дни недели
         for (let day = 0; day < 7; day++) {
             const sample = new Date(this.year, this.month, day + 1);
-            this.calendar[0][sample.getDay()] = sample.toLocaleString(I18n.getLocale(), { weekday: 'short' }).toUpperCase();
+            this.calendar[0][sample.getDay()] = sample
+                .toLocaleString(I18n.getLocale(), { weekday: "short" })
+                .toUpperCase();
         }
 
         this.list = [];
@@ -37,11 +39,11 @@ class Calendar {
         while (this.date.getMonth() === this.month) {
             let dayToPush = this.date;
             let days = [];
-            days.push(dayToPush.toLocaleString(I18n.getLocale(), {day: 'numeric'}));
-            days.push(dayToPush.toLocaleString(I18n.getLocale(), {weekday: 'short'}).toUpperCase());
-            days.push(dayToPush.toLocaleString(I18n.getLocale(), {month: 'long'}).toUpperCase());
+            days.push(dayToPush.toLocaleString(I18n.getLocale(), { day: "numeric" }));
+            days.push(dayToPush.toLocaleString(I18n.getLocale(), { weekday: "short" }).toUpperCase());
+            days.push(dayToPush.toLocaleString(I18n.getLocale(), { month: "long" }).toUpperCase());
             this.date.setDate(this.date.getDate() + 1);
-            this.list.push(days)
+            this.list.push(days);
         }
         let index = 1;
         for (let day of this.list) {
@@ -60,10 +62,10 @@ class Calendar {
         return new Date();
     }
     getMonthName() {
-        return new Date(this.year, this.month).toLocaleString(I18n.getLocale(), {month: 'long'}).toUpperCase();
+        return new Date(this.year, this.month).toLocaleString(I18n.getLocale(), { month: "long" }).toUpperCase();
     }
     getDayName() {
-        return new Date(this.year, this.month).toLocaleString(I18n.getLocale(), { weekday: 'long' }).toUpperCase();
+        return new Date(this.year, this.month).toLocaleString(I18n.getLocale(), { weekday: "long" }).toUpperCase();
     }
     getDate() {
         return new Date(this.year, this.month).getDate();
@@ -79,4 +81,4 @@ class Calendar {
     }
 }
 
-exports.Calendar = Calendar
+exports.Calendar = Calendar;