@schedule-x/date-picker - npm Package Compare versions

Comparing version 0.1.0-alpha.2 to 0.1.0-alpha.3

./dist/core.cjs.js

@@ -61,4 +61,9 @@ 'use strict';
 };
+const getDayNamesShort = (week, locale) => {
+    return week.map((date) => {
+        return date.toLocaleString(locale, { weekday: 'short' });
+    });
+};
 
-var img$1 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Uploaded to: SVG Repo%2c www.svgrepo.com%2c Generator: SVG Repo Mixer Tools --%3e%3csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9L12 15L18 9' stroke='%23DED8E1' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
+var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Uploaded to: SVG Repo%2c www.svgrepo.com%2c Generator: SVG Repo Mixer Tools --%3e%3csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9L12 15L18 9' stroke='%23DED8E1' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
 
@@ -104,3 +109,3 @@ function AppInput() {
     };
-    return (o$2(preact.Fragment, { children: o$2("div", { class: wrapperClasses.join(' '), children: [o$2("label", { class: "sx__date-input-label", children: $app.translate('Date') }), o$2("input", { value: $app.datePickerState.inputDisplayedValue.value, "data-testid": "date-picker-input", class: "sx__date-input", onClick: handleClick, onKeyUp: handleKeyUp, type: "text" }), o$2("img", { class: "sx__date-input-chevron", src: img$1, alt: "" })] }) }));
+    return (o$2(preact.Fragment, { children: o$2("div", { class: wrapperClasses.join(' '), children: [o$2("label", { class: "sx__date-input-label", children: $app.translate('Date') }), o$2("input", { value: $app.datePickerState.inputDisplayedValue.value, "data-testid": "date-picker-input", class: "sx__date-input", onClick: handleClick, onKeyUp: handleKeyUp, type: "text" }), o$2("img", { class: "sx__date-input-chevron", src: img, alt: "" })] }) }));
 }
@@ -175,4 +180,2 @@
 
-var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Uploaded to: SVG Repo%2c www.svgrepo.com%2c Generator: SVG Repo Mixer Tools --%3e%3csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9L12 15L18 9' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
-
 function MonthViewHeader({ setYearsView }) {
@@ -204,3 +207,3 @@ const $app = q$1(AppContext);
     };
-    return (o$2(preact.Fragment, { children: o$2("header", { class: "sx__date-picker__month-view-header", children: [o$2("button", { onClick: () => setPreviousMonth(), children: o$2("img", { class: "sx__date-picker__chevron sx__date-picker__chevron--previous", src: img, alt: $app.translate('Previous month') }) }), o$2("button", { class: "sx__date-picker__month-view-header__month-year", onClick: (event) => handleOpenYearsView(event), children: selectedDateMonthName + ' ' + datePickerYear }), o$2("button", { onClick: () => setNextMonth(), children: o$2("img", { class: "sx__date-picker__chevron sx__date-picker__chevron--next", src: img, alt: $app.translate('Next month') }) })] }) }));
+    return (o$2(preact.Fragment, { children: o$2("header", { class: "sx__date-picker__month-view-header", children: [o$2("button", { className: "sx__date-picker__chevron-wrapper", onClick: () => setPreviousMonth(), children: o$2("i", { class: "sx__date-picker__chevron sx__date-picker__chevron--previous", children: $app.translate('Previous month') }) }), o$2("button", { className: "sx__date-picker__month-view-header__month-year", onClick: (event) => handleOpenYearsView(event), children: selectedDateMonthName + ' ' + datePickerYear }), o$2("button", { className: "sx__date-picker__chevron-wrapper", onClick: () => setNextMonth(), children: o$2("i", { class: "sx__date-picker__chevron sx__date-picker__chevron--next", children: $app.translate('Next month') }) })] }) }));
 }
@@ -211,3 +214,9 @@
     const aWeek = $app.timeUnitsImpl.getWeekFor(toJSDate($app.datePickerState.datePickerDate.value));
-    const dayNames = getOneLetterDayNames(aWeek, $app.config.locale);
+    let dayNames = [];
+    if (['zh-cn'].includes($app.config.locale.toLowerCase())) {
+        dayNames = getDayNamesShort(aWeek, $app.config.locale);
+    }
+    else {
+        dayNames = getOneLetterDayNames(aWeek, $app.config.locale);
+    }
     return (o$2("div", { class: "sx__date-picker__day-names", children: dayNames.map((dayName) => (o$2("span", { "data-testid": "day-name", class: "sx__date-picker__day-name", children: dayName }))) }));
@@ -317,3 +326,7 @@ }
 function AppWrapper({ $app }) {
-    return (o$2(preact.Fragment, { children: o$2("div", { class: "sx__date-picker-wrapper", children: o$2(AppContext.Provider, { value: $app, children: [o$2(AppInput, {}), $app.datePickerState.isOpen.value && o$2(AppPopup, {})] }) }) }));
+    var _a;
+    const classes = ['sx__date-picker-wrapper'];
+    if ((_a = $app.config.style) === null || _a === void 0 ? void 0 : _a.dark)
+        classes.push('is-dark');
+    return (o$2(preact.Fragment, { children: o$2("div", { class: classes.join(' '), children: o$2(AppContext.Provider, { value: $app, children: [o$2(AppInput, {}), $app.datePickerState.isOpen.value && o$2(AppPopup, {})] }) }) }));
 }
@@ -506,2 +519,6 @@
     },
+    slashYMD: {
+        delimiter: DateFormatDelimiter.SLASH,
+        order: DateFormatOrder.YMD,
+    },
     periodDMY: {
@@ -519,2 +536,3 @@ delimiter: DateFormatDelimiter.PERIOD,
     ['en-GB', formatRules.slashDMY],
+    ['zh-CN', formatRules.slashYMD],
     ['de-DE', formatRules.periodDMY],
@@ -552,2 +570,3 @@ ['sv-SE', formatRules.dashYMD],
     const pattern224Dotted = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/;
+    const pattern442Slashed = /^(\d{4})\/(\d{1,2})\/(\d{1,2})$/;
     if (order === DateFormatOrder.DMY && delimiter === DateFormatDelimiter.SLASH) {
@@ -563,2 +582,7 @@ const matches = _getMatchesOrThrow(format, pattern224Slashed, locale);
     }
+    if (order === DateFormatOrder.YMD && delimiter === DateFormatDelimiter.SLASH) {
+        const matches = _getMatchesOrThrow(format, pattern442Slashed, locale);
+        const [, year, month, day] = matches;
+        return `${year}-${doubleDigit(+month)}-${doubleDigit(+day)}`;
+    }
     if (order === DateFormatOrder.DMY && delimiter === DateFormatDelimiter.PERIOD) {
@@ -696,3 +720,3 @@ const matches = _getMatchesOrThrow(format, pattern224Dotted, locale);
 class ConfigImpl {
-    constructor(locale = DEFAULT_LOCALE, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, min = toDateString$1(new Date(1970, 0, 1)), max = toDateString$1(new Date(new Date().getFullYear() + 1, 11, 31)), placement = Placement.BOTTOM_START, listeners = {}) {
+    constructor(locale = DEFAULT_LOCALE, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, min = toDateString$1(new Date(1970, 0, 1)), max = toDateString$1(new Date(new Date().getFullYear() + 1, 11, 31)), placement = Placement.BOTTOM_START, listeners = {}, style = {}) {
         Object.defineProperty(this, "locale", {
@@ -734,2 +758,8 @@ enumerable: true,
         });
+        Object.defineProperty(this, "style", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: style
+        });
     }
@@ -776,5 +806,11 @@ }
         });
+        Object.defineProperty(this, "style", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
     }
     build() {
-        return new ConfigImpl(this.locale, this.firstDayOfWeek, this.min, this.max, this.placement, this.listeners);
+        return new ConfigImpl(this.locale, this.firstDayOfWeek, this.min, this.max, this.placement, this.listeners, this.style);
     }
@@ -805,2 +841,6 @@ withLocale(locale) {
     }
+    withStyle(style) {
+        this.style = style;
+        return this;
+    }
 }
@@ -846,5 +886,41 @@
 
+const datePickerEnGB = {
+    Date: 'Date',
+    'MM/DD/YYYY': 'DD/MM/YYYY',
+    'Next month': 'Next month',
+    'Previous month': 'Previous month',
+};
+
+const enGB = {
+    ...datePickerEnGB,
+};
+
+const datePickerSvSE = {
+    Date: 'Datum',
+    'MM/DD/YYYY': 'ÅÅÅÅ-MM-DD',
+    'Next month': 'Nästa månad',
+    'Previous month': 'Föregående månad',
+};
+
+const svSE = {
+    ...datePickerSvSE,
+};
+
+const datePickerZhCN = {
+    Date: '日期',
+    'MM/DD/YYYY': '年/月/日',
+    'Next month': '下个月',
+    'Previous month': '上个月',
+};
+
+const zhCN = {
+    ...datePickerZhCN,
+};
+
 const translations = {
     deDE,
     enUS,
+    enGB,
+    svSE,
+    zhCN,
 };
@@ -860,2 +936,3 @@
         .withListeners(config.listeners)
+        .withStyle(config.style)
         .build();
@@ -862,0 +939,0 @@ const timeUnitsImpl = new TimeUnitsBuilder()

dist/core.cjs.js

@@ -61,4 +61,9 @@ 'use strict';
 };
+const getDayNamesShort = (week, locale) => {
+    return week.map((date) => {
+        return date.toLocaleString(locale, { weekday: 'short' });
+    });
+};
 
-var img$1 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Uploaded to: SVG Repo%2c www.svgrepo.com%2c Generator: SVG Repo Mixer Tools --%3e%3csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9L12 15L18 9' stroke='%23DED8E1' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
+var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Uploaded to: SVG Repo%2c www.svgrepo.com%2c Generator: SVG Repo Mixer Tools --%3e%3csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9L12 15L18 9' stroke='%23DED8E1' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
 
@@ -104,3 +109,3 @@ function AppInput() {
     };
-    return (o$2(preact.Fragment, { children: o$2("div", { class: wrapperClasses.join(' '), children: [o$2("label", { class: "sx__date-input-label", children: $app.translate('Date') }), o$2("input", { value: $app.datePickerState.inputDisplayedValue.value, "data-testid": "date-picker-input", class: "sx__date-input", onClick: handleClick, onKeyUp: handleKeyUp, type: "text" }), o$2("img", { class: "sx__date-input-chevron", src: img$1, alt: "" })] }) }));
+    return (o$2(preact.Fragment, { children: o$2("div", { class: wrapperClasses.join(' '), children: [o$2("label", { class: "sx__date-input-label", children: $app.translate('Date') }), o$2("input", { value: $app.datePickerState.inputDisplayedValue.value, "data-testid": "date-picker-input", class: "sx__date-input", onClick: handleClick, onKeyUp: handleKeyUp, type: "text" }), o$2("img", { class: "sx__date-input-chevron", src: img, alt: "" })] }) }));
 }
@@ -175,4 +180,2 @@
 
-var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Uploaded to: SVG Repo%2c www.svgrepo.com%2c Generator: SVG Repo Mixer Tools --%3e%3csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9L12 15L18 9' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
-
 function MonthViewHeader({ setYearsView }) {
@@ -204,3 +207,3 @@ const $app = q$1(AppContext);
     };
-    return (o$2(preact.Fragment, { children: o$2("header", { class: "sx__date-picker__month-view-header", children: [o$2("button", { onClick: () => setPreviousMonth(), children: o$2("img", { class: "sx__date-picker__chevron sx__date-picker__chevron--previous", src: img, alt: $app.translate('Previous month') }) }), o$2("button", { class: "sx__date-picker__month-view-header__month-year", onClick: (event) => handleOpenYearsView(event), children: selectedDateMonthName + ' ' + datePickerYear }), o$2("button", { onClick: () => setNextMonth(), children: o$2("img", { class: "sx__date-picker__chevron sx__date-picker__chevron--next", src: img, alt: $app.translate('Next month') }) })] }) }));
+    return (o$2(preact.Fragment, { children: o$2("header", { class: "sx__date-picker__month-view-header", children: [o$2("button", { className: "sx__date-picker__chevron-wrapper", onClick: () => setPreviousMonth(), children: o$2("i", { class: "sx__date-picker__chevron sx__date-picker__chevron--previous", children: $app.translate('Previous month') }) }), o$2("button", { className: "sx__date-picker__month-view-header__month-year", onClick: (event) => handleOpenYearsView(event), children: selectedDateMonthName + ' ' + datePickerYear }), o$2("button", { className: "sx__date-picker__chevron-wrapper", onClick: () => setNextMonth(), children: o$2("i", { class: "sx__date-picker__chevron sx__date-picker__chevron--next", children: $app.translate('Next month') }) })] }) }));
 }
@@ -211,3 +214,9 @@
     const aWeek = $app.timeUnitsImpl.getWeekFor(toJSDate($app.datePickerState.datePickerDate.value));
-    const dayNames = getOneLetterDayNames(aWeek, $app.config.locale);
+    let dayNames = [];
+    if (['zh-cn'].includes($app.config.locale.toLowerCase())) {
+        dayNames = getDayNamesShort(aWeek, $app.config.locale);
+    }
+    else {
+        dayNames = getOneLetterDayNames(aWeek, $app.config.locale);
+    }
     return (o$2("div", { class: "sx__date-picker__day-names", children: dayNames.map((dayName) => (o$2("span", { "data-testid": "day-name", class: "sx__date-picker__day-name", children: dayName }))) }));
@@ -317,3 +326,7 @@ }
 function AppWrapper({ $app }) {
-    return (o$2(preact.Fragment, { children: o$2("div", { class: "sx__date-picker-wrapper", children: o$2(AppContext.Provider, { value: $app, children: [o$2(AppInput, {}), $app.datePickerState.isOpen.value && o$2(AppPopup, {})] }) }) }));
+    var _a;
+    const classes = ['sx__date-picker-wrapper'];
+    if ((_a = $app.config.style) === null || _a === void 0 ? void 0 : _a.dark)
+        classes.push('is-dark');
+    return (o$2(preact.Fragment, { children: o$2("div", { class: classes.join(' '), children: o$2(AppContext.Provider, { value: $app, children: [o$2(AppInput, {}), $app.datePickerState.isOpen.value && o$2(AppPopup, {})] }) }) }));
 }
@@ -506,2 +519,6 @@
     },
+    slashYMD: {
+        delimiter: DateFormatDelimiter.SLASH,
+        order: DateFormatOrder.YMD,
+    },
     periodDMY: {
@@ -519,2 +536,3 @@ delimiter: DateFormatDelimiter.PERIOD,
     ['en-GB', formatRules.slashDMY],
+    ['zh-CN', formatRules.slashYMD],
     ['de-DE', formatRules.periodDMY],
@@ -552,2 +570,3 @@ ['sv-SE', formatRules.dashYMD],
     const pattern224Dotted = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/;
+    const pattern442Slashed = /^(\d{4})\/(\d{1,2})\/(\d{1,2})$/;
     if (order === DateFormatOrder.DMY && delimiter === DateFormatDelimiter.SLASH) {
@@ -563,2 +582,7 @@ const matches = _getMatchesOrThrow(format, pattern224Slashed, locale);
     }
+    if (order === DateFormatOrder.YMD && delimiter === DateFormatDelimiter.SLASH) {
+        const matches = _getMatchesOrThrow(format, pattern442Slashed, locale);
+        const [, year, month, day] = matches;
+        return `${year}-${doubleDigit(+month)}-${doubleDigit(+day)}`;
+    }
     if (order === DateFormatOrder.DMY && delimiter === DateFormatDelimiter.PERIOD) {
@@ -696,3 +720,3 @@ const matches = _getMatchesOrThrow(format, pattern224Dotted, locale);
 class ConfigImpl {
-    constructor(locale = DEFAULT_LOCALE, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, min = toDateString$1(new Date(1970, 0, 1)), max = toDateString$1(new Date(new Date().getFullYear() + 1, 11, 31)), placement = Placement.BOTTOM_START, listeners = {}) {
+    constructor(locale = DEFAULT_LOCALE, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, min = toDateString$1(new Date(1970, 0, 1)), max = toDateString$1(new Date(new Date().getFullYear() + 1, 11, 31)), placement = Placement.BOTTOM_START, listeners = {}, style = {}) {
         Object.defineProperty(this, "locale", {
@@ -734,2 +758,8 @@ enumerable: true,
         });
+        Object.defineProperty(this, "style", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: style
+        });
     }
@@ -776,5 +806,11 @@ }
         });
+        Object.defineProperty(this, "style", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
     }
     build() {
-        return new ConfigImpl(this.locale, this.firstDayOfWeek, this.min, this.max, this.placement, this.listeners);
+        return new ConfigImpl(this.locale, this.firstDayOfWeek, this.min, this.max, this.placement, this.listeners, this.style);
     }
@@ -805,2 +841,6 @@ withLocale(locale) {
     }
+    withStyle(style) {
+        this.style = style;
+        return this;
+    }
 }
@@ -846,5 +886,41 @@
 
+const datePickerEnGB = {
+    Date: 'Date',
+    'MM/DD/YYYY': 'DD/MM/YYYY',
+    'Next month': 'Next month',
+    'Previous month': 'Previous month',
+};
+
+const enGB = {
+    ...datePickerEnGB,
+};
+
+const datePickerSvSE = {
+    Date: 'Datum',
+    'MM/DD/YYYY': 'ÅÅÅÅ-MM-DD',
+    'Next month': 'Nästa månad',
+    'Previous month': 'Föregående månad',
+};
+
+const svSE = {
+    ...datePickerSvSE,
+};
+
+const datePickerZhCN = {
+    Date: '日期',
+    'MM/DD/YYYY': '年/月/日',
+    'Next month': '下个月',
+    'Previous month': '上个月',
+};
+
+const zhCN = {
+    ...datePickerZhCN,
+};
+
 const translations = {
     deDE,
     enUS,
+    enGB,
+    svSE,
+    zhCN,
 };
@@ -860,2 +936,3 @@
         .withListeners(config.listeners)
+        .withStyle(config.style)
         .build();
@@ -862,0 +939,0 @@ const timeUnitsImpl = new TimeUnitsBuilder()

dist/core.js

@@ -57,4 +57,9 @@ import { options, createContext, Component, createElement, Fragment, toChildArray, render } from 'preact';
 };
+const getDayNamesShort = (week, locale) => {
+    return week.map((date) => {
+        return date.toLocaleString(locale, { weekday: 'short' });
+    });
+};
 
-var img$1 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Uploaded to: SVG Repo%2c www.svgrepo.com%2c Generator: SVG Repo Mixer Tools --%3e%3csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9L12 15L18 9' stroke='%23DED8E1' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
+var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Uploaded to: SVG Repo%2c www.svgrepo.com%2c Generator: SVG Repo Mixer Tools --%3e%3csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9L12 15L18 9' stroke='%23DED8E1' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
 
@@ -100,3 +105,3 @@ function AppInput() {
     };
-    return (o$2(Fragment, { children: o$2("div", { class: wrapperClasses.join(' '), children: [o$2("label", { class: "sx__date-input-label", children: $app.translate('Date') }), o$2("input", { value: $app.datePickerState.inputDisplayedValue.value, "data-testid": "date-picker-input", class: "sx__date-input", onClick: handleClick, onKeyUp: handleKeyUp, type: "text" }), o$2("img", { class: "sx__date-input-chevron", src: img$1, alt: "" })] }) }));
+    return (o$2(Fragment, { children: o$2("div", { class: wrapperClasses.join(' '), children: [o$2("label", { class: "sx__date-input-label", children: $app.translate('Date') }), o$2("input", { value: $app.datePickerState.inputDisplayedValue.value, "data-testid": "date-picker-input", class: "sx__date-input", onClick: handleClick, onKeyUp: handleKeyUp, type: "text" }), o$2("img", { class: "sx__date-input-chevron", src: img, alt: "" })] }) }));
 }
@@ -171,4 +176,2 @@
 
-var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Uploaded to: SVG Repo%2c www.svgrepo.com%2c Generator: SVG Repo Mixer Tools --%3e%3csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9L12 15L18 9' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
-
 function MonthViewHeader({ setYearsView }) {
@@ -200,3 +203,3 @@ const $app = q$1(AppContext);
     };
-    return (o$2(Fragment, { children: o$2("header", { class: "sx__date-picker__month-view-header", children: [o$2("button", { onClick: () => setPreviousMonth(), children: o$2("img", { class: "sx__date-picker__chevron sx__date-picker__chevron--previous", src: img, alt: $app.translate('Previous month') }) }), o$2("button", { class: "sx__date-picker__month-view-header__month-year", onClick: (event) => handleOpenYearsView(event), children: selectedDateMonthName + ' ' + datePickerYear }), o$2("button", { onClick: () => setNextMonth(), children: o$2("img", { class: "sx__date-picker__chevron sx__date-picker__chevron--next", src: img, alt: $app.translate('Next month') }) })] }) }));
+    return (o$2(Fragment, { children: o$2("header", { class: "sx__date-picker__month-view-header", children: [o$2("button", { className: "sx__date-picker__chevron-wrapper", onClick: () => setPreviousMonth(), children: o$2("i", { class: "sx__date-picker__chevron sx__date-picker__chevron--previous", children: $app.translate('Previous month') }) }), o$2("button", { className: "sx__date-picker__month-view-header__month-year", onClick: (event) => handleOpenYearsView(event), children: selectedDateMonthName + ' ' + datePickerYear }), o$2("button", { className: "sx__date-picker__chevron-wrapper", onClick: () => setNextMonth(), children: o$2("i", { class: "sx__date-picker__chevron sx__date-picker__chevron--next", children: $app.translate('Next month') }) })] }) }));
 }
@@ -207,3 +210,9 @@
     const aWeek = $app.timeUnitsImpl.getWeekFor(toJSDate($app.datePickerState.datePickerDate.value));
-    const dayNames = getOneLetterDayNames(aWeek, $app.config.locale);
+    let dayNames = [];
+    if (['zh-cn'].includes($app.config.locale.toLowerCase())) {
+        dayNames = getDayNamesShort(aWeek, $app.config.locale);
+    }
+    else {
+        dayNames = getOneLetterDayNames(aWeek, $app.config.locale);
+    }
     return (o$2("div", { class: "sx__date-picker__day-names", children: dayNames.map((dayName) => (o$2("span", { "data-testid": "day-name", class: "sx__date-picker__day-name", children: dayName }))) }));
@@ -313,3 +322,7 @@ }
 function AppWrapper({ $app }) {
-    return (o$2(Fragment, { children: o$2("div", { class: "sx__date-picker-wrapper", children: o$2(AppContext.Provider, { value: $app, children: [o$2(AppInput, {}), $app.datePickerState.isOpen.value && o$2(AppPopup, {})] }) }) }));
+    var _a;
+    const classes = ['sx__date-picker-wrapper'];
+    if ((_a = $app.config.style) === null || _a === void 0 ? void 0 : _a.dark)
+        classes.push('is-dark');
+    return (o$2(Fragment, { children: o$2("div", { class: classes.join(' '), children: o$2(AppContext.Provider, { value: $app, children: [o$2(AppInput, {}), $app.datePickerState.isOpen.value && o$2(AppPopup, {})] }) }) }));
 }
@@ -502,2 +515,6 @@
     },
+    slashYMD: {
+        delimiter: DateFormatDelimiter.SLASH,
+        order: DateFormatOrder.YMD,
+    },
     periodDMY: {
@@ -515,2 +532,3 @@ delimiter: DateFormatDelimiter.PERIOD,
     ['en-GB', formatRules.slashDMY],
+    ['zh-CN', formatRules.slashYMD],
     ['de-DE', formatRules.periodDMY],
@@ -548,2 +566,3 @@ ['sv-SE', formatRules.dashYMD],
     const pattern224Dotted = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/;
+    const pattern442Slashed = /^(\d{4})\/(\d{1,2})\/(\d{1,2})$/;
     if (order === DateFormatOrder.DMY && delimiter === DateFormatDelimiter.SLASH) {
@@ -559,2 +578,7 @@ const matches = _getMatchesOrThrow(format, pattern224Slashed, locale);
     }
+    if (order === DateFormatOrder.YMD && delimiter === DateFormatDelimiter.SLASH) {
+        const matches = _getMatchesOrThrow(format, pattern442Slashed, locale);
+        const [, year, month, day] = matches;
+        return `${year}-${doubleDigit(+month)}-${doubleDigit(+day)}`;
+    }
     if (order === DateFormatOrder.DMY && delimiter === DateFormatDelimiter.PERIOD) {
@@ -692,3 +716,3 @@ const matches = _getMatchesOrThrow(format, pattern224Dotted, locale);
 class ConfigImpl {
-    constructor(locale = DEFAULT_LOCALE, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, min = toDateString$1(new Date(1970, 0, 1)), max = toDateString$1(new Date(new Date().getFullYear() + 1, 11, 31)), placement = Placement.BOTTOM_START, listeners = {}) {
+    constructor(locale = DEFAULT_LOCALE, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, min = toDateString$1(new Date(1970, 0, 1)), max = toDateString$1(new Date(new Date().getFullYear() + 1, 11, 31)), placement = Placement.BOTTOM_START, listeners = {}, style = {}) {
         Object.defineProperty(this, "locale", {
@@ -730,2 +754,8 @@ enumerable: true,
         });
+        Object.defineProperty(this, "style", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: style
+        });
     }
@@ -772,5 +802,11 @@ }
         });
+        Object.defineProperty(this, "style", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
     }
     build() {
-        return new ConfigImpl(this.locale, this.firstDayOfWeek, this.min, this.max, this.placement, this.listeners);
+        return new ConfigImpl(this.locale, this.firstDayOfWeek, this.min, this.max, this.placement, this.listeners, this.style);
     }
@@ -801,2 +837,6 @@ withLocale(locale) {
     }
+    withStyle(style) {
+        this.style = style;
+        return this;
+    }
 }
@@ -842,5 +882,41 @@
 
+const datePickerEnGB = {
+    Date: 'Date',
+    'MM/DD/YYYY': 'DD/MM/YYYY',
+    'Next month': 'Next month',
+    'Previous month': 'Previous month',
+};
+
+const enGB = {
+    ...datePickerEnGB,
+};
+
+const datePickerSvSE = {
+    Date: 'Datum',
+    'MM/DD/YYYY': 'ÅÅÅÅ-MM-DD',
+    'Next month': 'Nästa månad',
+    'Previous month': 'Föregående månad',
+};
+
+const svSE = {
+    ...datePickerSvSE,
+};
+
+const datePickerZhCN = {
+    Date: '日期',
+    'MM/DD/YYYY': '年/月/日',
+    'Next month': '下个月',
+    'Previous month': '上个月',
+};
+
+const zhCN = {
+    ...datePickerZhCN,
+};
+
 const translations = {
     deDE,
     enUS,
+    enGB,
+    svSE,
+    zhCN,
 };
@@ -856,2 +932,3 @@
         .withListeners(config.listeners)
+        .withStyle(config.style)
         .build();
@@ -858,0 +935,0 @@ const timeUnitsImpl = new TimeUnitsBuilder()

dist/core.umd.js

@@ -61,4 +61,9 @@ (function (global, factory) {
   };
+  const getDayNamesShort = (week, locale) => {
+      return week.map((date) => {
+          return date.toLocaleString(locale, { weekday: 'short' });
+      });
+  };
 
-  var img$1 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Uploaded to: SVG Repo%2c www.svgrepo.com%2c Generator: SVG Repo Mixer Tools --%3e%3csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9L12 15L18 9' stroke='%23DED8E1' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
+  var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Uploaded to: SVG Repo%2c www.svgrepo.com%2c Generator: SVG Repo Mixer Tools --%3e%3csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9L12 15L18 9' stroke='%23DED8E1' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
 
@@ -104,3 +109,3 @@ function AppInput() {
       };
-      return (o$2(preact.Fragment, { children: o$2("div", { class: wrapperClasses.join(' '), children: [o$2("label", { class: "sx__date-input-label", children: $app.translate('Date') }), o$2("input", { value: $app.datePickerState.inputDisplayedValue.value, "data-testid": "date-picker-input", class: "sx__date-input", onClick: handleClick, onKeyUp: handleKeyUp, type: "text" }), o$2("img", { class: "sx__date-input-chevron", src: img$1, alt: "" })] }) }));
+      return (o$2(preact.Fragment, { children: o$2("div", { class: wrapperClasses.join(' '), children: [o$2("label", { class: "sx__date-input-label", children: $app.translate('Date') }), o$2("input", { value: $app.datePickerState.inputDisplayedValue.value, "data-testid": "date-picker-input", class: "sx__date-input", onClick: handleClick, onKeyUp: handleKeyUp, type: "text" }), o$2("img", { class: "sx__date-input-chevron", src: img, alt: "" })] }) }));
   }
@@ -175,4 +180,2 @@
 
-  var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Uploaded to: SVG Repo%2c www.svgrepo.com%2c Generator: SVG Repo Mixer Tools --%3e%3csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9L12 15L18 9' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
-
   function MonthViewHeader({ setYearsView }) {
@@ -204,3 +207,3 @@ const $app = q$1(AppContext);
       };
-      return (o$2(preact.Fragment, { children: o$2("header", { class: "sx__date-picker__month-view-header", children: [o$2("button", { onClick: () => setPreviousMonth(), children: o$2("img", { class: "sx__date-picker__chevron sx__date-picker__chevron--previous", src: img, alt: $app.translate('Previous month') }) }), o$2("button", { class: "sx__date-picker__month-view-header__month-year", onClick: (event) => handleOpenYearsView(event), children: selectedDateMonthName + ' ' + datePickerYear }), o$2("button", { onClick: () => setNextMonth(), children: o$2("img", { class: "sx__date-picker__chevron sx__date-picker__chevron--next", src: img, alt: $app.translate('Next month') }) })] }) }));
+      return (o$2(preact.Fragment, { children: o$2("header", { class: "sx__date-picker__month-view-header", children: [o$2("button", { className: "sx__date-picker__chevron-wrapper", onClick: () => setPreviousMonth(), children: o$2("i", { class: "sx__date-picker__chevron sx__date-picker__chevron--previous", children: $app.translate('Previous month') }) }), o$2("button", { className: "sx__date-picker__month-view-header__month-year", onClick: (event) => handleOpenYearsView(event), children: selectedDateMonthName + ' ' + datePickerYear }), o$2("button", { className: "sx__date-picker__chevron-wrapper", onClick: () => setNextMonth(), children: o$2("i", { class: "sx__date-picker__chevron sx__date-picker__chevron--next", children: $app.translate('Next month') }) })] }) }));
   }
@@ -211,3 +214,9 @@
       const aWeek = $app.timeUnitsImpl.getWeekFor(toJSDate($app.datePickerState.datePickerDate.value));
-      const dayNames = getOneLetterDayNames(aWeek, $app.config.locale);
+      let dayNames = [];
+      if (['zh-cn'].includes($app.config.locale.toLowerCase())) {
+          dayNames = getDayNamesShort(aWeek, $app.config.locale);
+      }
+      else {
+          dayNames = getOneLetterDayNames(aWeek, $app.config.locale);
+      }
       return (o$2("div", { class: "sx__date-picker__day-names", children: dayNames.map((dayName) => (o$2("span", { "data-testid": "day-name", class: "sx__date-picker__day-name", children: dayName }))) }));
@@ -317,3 +326,7 @@ }
   function AppWrapper({ $app }) {
-      return (o$2(preact.Fragment, { children: o$2("div", { class: "sx__date-picker-wrapper", children: o$2(AppContext.Provider, { value: $app, children: [o$2(AppInput, {}), $app.datePickerState.isOpen.value && o$2(AppPopup, {})] }) }) }));
+      var _a;
+      const classes = ['sx__date-picker-wrapper'];
+      if ((_a = $app.config.style) === null || _a === void 0 ? void 0 : _a.dark)
+          classes.push('is-dark');
+      return (o$2(preact.Fragment, { children: o$2("div", { class: classes.join(' '), children: o$2(AppContext.Provider, { value: $app, children: [o$2(AppInput, {}), $app.datePickerState.isOpen.value && o$2(AppPopup, {})] }) }) }));
   }
@@ -506,2 +519,6 @@
       },
+      slashYMD: {
+          delimiter: DateFormatDelimiter.SLASH,
+          order: DateFormatOrder.YMD,
+      },
       periodDMY: {
@@ -519,2 +536,3 @@ delimiter: DateFormatDelimiter.PERIOD,
       ['en-GB', formatRules.slashDMY],
+      ['zh-CN', formatRules.slashYMD],
       ['de-DE', formatRules.periodDMY],
@@ -552,2 +570,3 @@ ['sv-SE', formatRules.dashYMD],
       const pattern224Dotted = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/;
+      const pattern442Slashed = /^(\d{4})\/(\d{1,2})\/(\d{1,2})$/;
       if (order === DateFormatOrder.DMY && delimiter === DateFormatDelimiter.SLASH) {
@@ -563,2 +582,7 @@ const matches = _getMatchesOrThrow(format, pattern224Slashed, locale);
       }
+      if (order === DateFormatOrder.YMD && delimiter === DateFormatDelimiter.SLASH) {
+          const matches = _getMatchesOrThrow(format, pattern442Slashed, locale);
+          const [, year, month, day] = matches;
+          return `${year}-${doubleDigit(+month)}-${doubleDigit(+day)}`;
+      }
       if (order === DateFormatOrder.DMY && delimiter === DateFormatDelimiter.PERIOD) {
@@ -696,3 +720,3 @@ const matches = _getMatchesOrThrow(format, pattern224Dotted, locale);
   class ConfigImpl {
-      constructor(locale = DEFAULT_LOCALE, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, min = toDateString$1(new Date(1970, 0, 1)), max = toDateString$1(new Date(new Date().getFullYear() + 1, 11, 31)), placement = Placement.BOTTOM_START, listeners = {}) {
+      constructor(locale = DEFAULT_LOCALE, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, min = toDateString$1(new Date(1970, 0, 1)), max = toDateString$1(new Date(new Date().getFullYear() + 1, 11, 31)), placement = Placement.BOTTOM_START, listeners = {}, style = {}) {
           Object.defineProperty(this, "locale", {
@@ -734,2 +758,8 @@ enumerable: true,
           });
+          Object.defineProperty(this, "style", {
+              enumerable: true,
+              configurable: true,
+              writable: true,
+              value: style
+          });
       }
@@ -776,5 +806,11 @@ }
           });
+          Object.defineProperty(this, "style", {
+              enumerable: true,
+              configurable: true,
+              writable: true,
+              value: void 0
+          });
       }
       build() {
-          return new ConfigImpl(this.locale, this.firstDayOfWeek, this.min, this.max, this.placement, this.listeners);
+          return new ConfigImpl(this.locale, this.firstDayOfWeek, this.min, this.max, this.placement, this.listeners, this.style);
       }
@@ -805,2 +841,6 @@ withLocale(locale) {
       }
+      withStyle(style) {
+          this.style = style;
+          return this;
+      }
   }
@@ -846,5 +886,41 @@
 
+  const datePickerEnGB = {
+      Date: 'Date',
+      'MM/DD/YYYY': 'DD/MM/YYYY',
+      'Next month': 'Next month',
+      'Previous month': 'Previous month',
+  };
+
+  const enGB = {
+      ...datePickerEnGB,
+  };
+
+  const datePickerSvSE = {
+      Date: 'Datum',
+      'MM/DD/YYYY': 'ÅÅÅÅ-MM-DD',
+      'Next month': 'Nästa månad',
+      'Previous month': 'Föregående månad',
+  };
+
+  const svSE = {
+      ...datePickerSvSE,
+  };
+
+  const datePickerZhCN = {
+      Date: '日期',
+      'MM/DD/YYYY': '年/月/日',
+      'Next month': '下个月',
+      'Previous month': '上个月',
+  };
+
+  const zhCN = {
+      ...datePickerZhCN,
+  };
+
   const translations = {
       deDE,
       enUS,
+      enGB,
+      svSE,
+      zhCN,
   };
@@ -860,2 +936,3 @@
           .withListeners(config.listeners)
+          .withStyle(config.style)
           .build();
@@ -862,0 +939,0 @@ const timeUnitsImpl = new TimeUnitsBuilder()

dist/packages/date-picker/src/components/__test__/app-wrapper/utils.d.ts

@@ -6,1 +6,2 @@ import DatePickerAppSingleton from '../../../utils/stateful/app-singleton/date-picker-app.singleton';
 export declare const renderWithOpenPopup: ($app: DatePickerAppSingleton | undefined) => void;
+export declare const getAppWrapper: () => HTMLElement;

dist/packages/date-picker/src/utils/stateful/config/config.builder.d.ts

@@ -6,2 +6,3 @@ import Builder from '../../../../../../shared/interfaces/builder.interface';
 import { DatePickerListeners } from './listeners.interface';
+import { DatePickerStyle } from './style.interface';
 export declare class ConfigBuilder implements Builder<DatePickerConfigInternal> {
@@ -14,2 +15,3 @@ locale: string | undefined;
     listeners: DatePickerListeners | undefined;
+    style: DatePickerStyle | undefined;
     build(): DatePickerConfigInternal;
@@ -22,2 +24,3 @@ withLocale(locale: string | undefined): ConfigBuilder;
     withListeners(listeners: DatePickerListeners | undefined): ConfigBuilder;
+    withStyle(style: DatePickerStyle | undefined): ConfigBuilder;
 }

dist/packages/date-picker/src/utils/stateful/config/config.impl.d.ts

@@ -5,2 +5,3 @@ import DatePickerConfigInternal from './config.interface';
 import { DatePickerListeners } from './listeners.interface';
+import { DatePickerStyle } from './style.interface';
 export declare class ConfigImpl implements DatePickerConfigInternal {
@@ -13,3 +14,4 @@ locale: string;
     listeners: DatePickerListeners;
-    constructor(locale?: string, firstDayOfWeek?: WeekDay, min?: string, max?: string, placement?: Placement, listeners?: DatePickerListeners);
+    style: DatePickerStyle;
+    constructor(locale?: string, firstDayOfWeek?: WeekDay, min?: string, max?: string, placement?: Placement, listeners?: DatePickerListeners, style?: DatePickerStyle);
 }

dist/packages/date-picker/src/utils/stateful/config/config.interface.d.ts

 import Config from '../../../../../../shared/interfaces/config.interface';
 import { Placement } from '../../../enums/placement.enum';
 import { DatePickerListeners } from './listeners.interface';
+import { DatePickerStyle } from './style.interface';
 export default interface DatePickerConfigInternal extends Config {
@@ -9,2 +10,3 @@ min: string;
     listeners: DatePickerListeners;
+    style: DatePickerStyle;
 }
@@ -11,0 +13,0 @@ export interface DatePickerConfigExternal extends Partial<Omit<DatePickerConfigInternal, 'placement'>> {

dist/packages/date-picker/src/utils/stateless/testing/create-app-singleton.d.ts

 export declare const appSingletonWithGerman: () => import("../../stateful/app-singleton/date-picker-app.singleton").default;
+export declare const appSingletonWithLocale: (locale: string) => import("../../stateful/app-singleton/date-picker-app.singleton").default;

dist/packages/translations/src/index.d.ts

 import { deDE } from './locales/de-DE';
 import { enUS } from './locales/en-US';
 import { translate } from './translator/translate';
+import { enGB } from './locales/en-GB';
+import { svSE } from './locales/sv-SE';
+import { zhCN } from './locales/zh-CN';
 declare const translations: {
     deDE: import("./types/date-picker.translations").DatePickerTranslations;
     enUS: import("./types/date-picker.translations").DatePickerTranslations;
+    enGB: import("./types/date-picker.translations").DatePickerTranslations;
+    svSE: import("./types/date-picker.translations").DatePickerTranslations;
+    zhCN: import("./types/date-picker.translations").DatePickerTranslations;
 };
@@ -11,4 +17,7 @@ declare const datePickerTranslations: {
     enUS: import("./types/date-picker.translations").DatePickerTranslations;
+    enGB: import("./types/date-picker.translations").DatePickerTranslations;
+    svSE: import("./types/date-picker.translations").DatePickerTranslations;
+    zhCN: import("./types/date-picker.translations").DatePickerTranslations;
 };
 export type TranslateFn = (key: string) => string;
-export { translate, translations, datePickerTranslations, deDE, enUS };
+export { translate, translations, datePickerTranslations, deDE, enUS, enGB, svSE, zhCN, };

dist/shared/utils/stateless/time/date-time-localization/date-time-localization.d.ts

@@ -5,1 +5,2 @@ export declare const toLocalizedMonth: (date: Date, locale: string) => string;
 export declare const getOneLetterDayNames: (week: Date[], locale: string) => string[];
+export declare const getDayNamesShort: (week: Date[], locale: string) => string[];

package.json

 {
   "name": "@schedule-x/date-picker",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.3",
   "description": "Schedule-X date picker component",
@@ -18,3 +18,3 @@ "author": {
   "dependencies": {
-    "@schedule-x/translations": "^0.1.0-alpha.2",
+    "@schedule-x/translations": "^0.1.0-alpha.3",
     "preact": "^10.16.0"
@@ -27,3 +27,3 @@ },
   },
-  "gitHead": "052aa6562e27bd1776de750b3054ee45daf7a39a"
+  "gitHead": "daf98eee92dd25c444f0092c660a0a62fa887a4d"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

220193

increased by4.49%

Number of package files

99

increased by8.79%

Lines of code

4202

increased by8.27%

Dependency changes

• Updated@schedule-x/translations@^0.1.0-alpha.3