diff --git a/src/Umbraco.Web.UI.Client/.storybook/main.ts b/src/Umbraco.Web.UI.Client/.storybook/main.ts index 22cadbe5ec..47e2a92d14 100644 --- a/src/Umbraco.Web.UI.Client/.storybook/main.ts +++ b/src/Umbraco.Web.UI.Client/.storybook/main.ts @@ -38,8 +38,8 @@ const config: StorybookConfig = { }, refs: { uui: { - title: 'Umbraco UI Library (1.6.0)', - url: 'https://04709c3--62189360eeb21b003ab2f4ad.chromatic.com/', + title: 'Umbraco UI Library', + url: 'https://62189360eeb21b003ab2f4ad-vfnpsanjps.chromatic.com/', }, }, }; diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json index 91b9a2eaea..ee3c1ade14 100644 --- a/src/Umbraco.Web.UI.Client/package-lock.json +++ b/src/Umbraco.Web.UI.Client/package-lock.json @@ -12,7 +12,7 @@ "@types/diff": "^5.0.9", "@types/dompurify": "^3.0.5", "@types/uuid": "^9.0.8", - "@umbraco-ui/uui": "1.8.0-rc.1", + "@umbraco-ui/uui": "1.8.0-rc.2", "@umbraco-ui/uui-css": "1.8.0-rc.0", "base64-js": "^1.5.1", "diff": "^5.2.0", @@ -6879,9 +6879,9 @@ } }, "node_modules/@umbraco-ui/uui": { - "version": "1.8.0-rc.1", - "resolved": "https://registry.npmjs.org/@umbraco-ui/uui/-/uui-1.8.0-rc.1.tgz", - "integrity": "sha512-YSM3HoUAAUiDNfbbI13X586BPucPvqLV8UGSj7hGQN+DgqiydQCxup8bYWIQwtoQzXtd7wgn8N8e7/5sv01PDw==", + "version": "1.8.0-rc.2", + "resolved": "https://registry.npmjs.org/@umbraco-ui/uui/-/uui-1.8.0-rc.2.tgz", + "integrity": "sha512-KYySEmXsl0Ga1lAqAiClsjCMquSAZpo/9HZUcnrkw1dgZN8XaHmt/0O+b1QOty7WHZihurcvPQh169+BfMwUFw==", "dependencies": { "@umbraco-ui/uui-action-bar": "1.8.0-rc.0", "@umbraco-ui/uui-avatar": "1.8.0-rc.0", @@ -6891,7 +6891,7 @@ "@umbraco-ui/uui-boolean-input": "1.8.0-rc.0", "@umbraco-ui/uui-box": "1.8.0-rc.1", "@umbraco-ui/uui-breadcrumbs": "1.8.0-rc.0", - "@umbraco-ui/uui-button": "1.8.0-rc.0", + "@umbraco-ui/uui-button": "1.8.0-rc.2", "@umbraco-ui/uui-button-group": "1.8.0-rc.0", "@umbraco-ui/uui-button-inline-create": "1.8.0-rc.0", "@umbraco-ui/uui-card": "1.8.0-rc.0", @@ -6906,7 +6906,7 @@ "@umbraco-ui/uui-color-slider": "1.8.0-rc.0", "@umbraco-ui/uui-color-swatch": "1.8.0-rc.0", "@umbraco-ui/uui-color-swatches": "1.8.0-rc.0", - "@umbraco-ui/uui-combobox": "1.8.0-rc.0", + "@umbraco-ui/uui-combobox": "1.8.0-rc.2", "@umbraco-ui/uui-combobox-list": "1.8.0-rc.0", "@umbraco-ui/uui-css": "1.8.0-rc.0", "@umbraco-ui/uui-dialog": "1.8.0-rc.0", @@ -6920,8 +6920,8 @@ "@umbraco-ui/uui-icon-registry": "1.8.0-rc.0", "@umbraco-ui/uui-icon-registry-essential": "1.8.0-rc.0", "@umbraco-ui/uui-input": "1.8.0-rc.0", - "@umbraco-ui/uui-input-file": "1.8.0-rc.0", - "@umbraco-ui/uui-input-lock": "1.8.0-rc.0", + "@umbraco-ui/uui-input-file": "1.8.0-rc.2", + "@umbraco-ui/uui-input-lock": "1.8.0-rc.2", "@umbraco-ui/uui-input-password": "1.8.0-rc.0", "@umbraco-ui/uui-keyboard-shortcut": "1.8.0-rc.0", "@umbraco-ui/uui-label": "1.8.0-rc.0", @@ -6929,8 +6929,8 @@ "@umbraco-ui/uui-loader-bar": "1.8.0-rc.0", "@umbraco-ui/uui-loader-circle": "1.8.0-rc.0", "@umbraco-ui/uui-menu-item": "1.8.0-rc.1", - "@umbraco-ui/uui-modal": "1.8.0-rc.0", - "@umbraco-ui/uui-pagination": "1.8.0-rc.0", + "@umbraco-ui/uui-modal": "1.8.0-rc.2", + "@umbraco-ui/uui-pagination": "1.8.0-rc.2", "@umbraco-ui/uui-popover": "1.8.0-rc.0", "@umbraco-ui/uui-popover-container": "1.8.0-rc.0", "@umbraco-ui/uui-progress-bar": "1.8.0-rc.0", @@ -6957,11 +6957,11 @@ "@umbraco-ui/uui-symbol-more": "1.8.0-rc.0", "@umbraco-ui/uui-symbol-sort": "1.8.0-rc.0", "@umbraco-ui/uui-table": "1.8.0-rc.0", - "@umbraco-ui/uui-tabs": "1.8.0-rc.0", + "@umbraco-ui/uui-tabs": "1.8.0-rc.2", "@umbraco-ui/uui-tag": "1.8.0-rc.0", "@umbraco-ui/uui-textarea": "1.8.0-rc.0", - "@umbraco-ui/uui-toast-notification": "1.8.0-rc.0", - "@umbraco-ui/uui-toast-notification-container": "1.8.0-rc.0", + "@umbraco-ui/uui-toast-notification": "1.8.0-rc.2", + "@umbraco-ui/uui-toast-notification-container": "1.8.0-rc.2", "@umbraco-ui/uui-toast-notification-layout": "1.8.0-rc.0", "@umbraco-ui/uui-toggle": "1.8.0-rc.0", "@umbraco-ui/uui-visually-hidden": "1.8.0-rc.0" @@ -7035,9 +7035,9 @@ } }, "node_modules/@umbraco-ui/uui-button": { - "version": "1.8.0-rc.0", - "resolved": "https://registry.npmjs.org/@umbraco-ui/uui-button/-/uui-button-1.8.0-rc.0.tgz", - "integrity": "sha512-V6Tl+uqBvy4ciKeoohylK8t4rPBl4aJNqVwxG13YCDOu95k+q+0neglAznkK+s5thhKThBHuW5XesRIEOW2Q3g==", + "version": "1.8.0-rc.2", + "resolved": "https://registry.npmjs.org/@umbraco-ui/uui-button/-/uui-button-1.8.0-rc.2.tgz", + "integrity": "sha512-5JAS247c0NdjsOdzdXOqjOEsfb1HxvPWvBc2KUMOi2hjh/TQbp765BXB0lvc5RqePwuJbwogeAhbesLuRvCCwQ==", "dependencies": { "@umbraco-ui/uui-base": "1.8.0-rc.0", "@umbraco-ui/uui-icon-registry-essential": "1.8.0-rc.0" @@ -7172,12 +7172,12 @@ } }, "node_modules/@umbraco-ui/uui-combobox": { - "version": "1.8.0-rc.0", - "resolved": "https://registry.npmjs.org/@umbraco-ui/uui-combobox/-/uui-combobox-1.8.0-rc.0.tgz", - "integrity": "sha512-+7N0+LSCZ4SO1Y3XvG7zJU68dxKiqhkouuAWMibzTo7S5WeDQx6R3zATgM5iM+lCIVcnWzt8b34sHOug1rpatg==", + "version": "1.8.0-rc.2", + "resolved": "https://registry.npmjs.org/@umbraco-ui/uui-combobox/-/uui-combobox-1.8.0-rc.2.tgz", + "integrity": "sha512-71AbVcHweB36g3jUCur/PKIKbpSHMvJq2iQou84NgVtO+hBM0PxH2JOsLRCMFG76D8fjIUd03tNp6szBHH1RMQ==", "dependencies": { "@umbraco-ui/uui-base": "1.8.0-rc.0", - "@umbraco-ui/uui-button": "1.8.0-rc.0", + "@umbraco-ui/uui-button": "1.8.0-rc.2", "@umbraco-ui/uui-combobox-list": "1.8.0-rc.0", "@umbraco-ui/uui-icon": "1.8.0-rc.0", "@umbraco-ui/uui-popover-container": "1.8.0-rc.0", @@ -7298,25 +7298,25 @@ } }, "node_modules/@umbraco-ui/uui-input-file": { - "version": "1.8.0-rc.0", - "resolved": "https://registry.npmjs.org/@umbraco-ui/uui-input-file/-/uui-input-file-1.8.0-rc.0.tgz", - "integrity": "sha512-GHFlUIprhObBt6c+o5AWcScwVaFK2dN0GU4wfKXFcYvG9SZxuYJqC87z0ovX8qjXE8VgTTIlaF2T8GgNBmXjHg==", + "version": "1.8.0-rc.2", + "resolved": "https://registry.npmjs.org/@umbraco-ui/uui-input-file/-/uui-input-file-1.8.0-rc.2.tgz", + "integrity": "sha512-WO4boW7+K4cFF+wo+qunBtiWyfn2XOdd3tl+8M/+lBwmCDIxuLbhrDosZEiUKvhyG4BjZxK1+C5JFqROZSQrkg==", "dependencies": { "@umbraco-ui/uui-action-bar": "1.8.0-rc.0", "@umbraco-ui/uui-base": "1.8.0-rc.0", - "@umbraco-ui/uui-button": "1.8.0-rc.0", + "@umbraco-ui/uui-button": "1.8.0-rc.2", "@umbraco-ui/uui-file-dropzone": "1.8.0-rc.0", "@umbraco-ui/uui-icon": "1.8.0-rc.0", "@umbraco-ui/uui-icon-registry-essential": "1.8.0-rc.0" } }, "node_modules/@umbraco-ui/uui-input-lock": { - "version": "1.8.0-rc.0", - "resolved": "https://registry.npmjs.org/@umbraco-ui/uui-input-lock/-/uui-input-lock-1.8.0-rc.0.tgz", - "integrity": "sha512-GMKi/DFZPLIUG4IfAb9HFsuDwTmhnHgq/qHg+YbfZ2fPMjvuNQhFaWYbuYMIksLu13hQsiZdMjnHpBnM8leVpw==", + "version": "1.8.0-rc.2", + "resolved": "https://registry.npmjs.org/@umbraco-ui/uui-input-lock/-/uui-input-lock-1.8.0-rc.2.tgz", + "integrity": "sha512-k8Dv83zUuEQvQBOFE+oD6tBNXB+UBd6pnQmoqLvohDobWVmjWo8o0vL2AszroLR9XFPGbPE+UpCNODM7OAEw9A==", "dependencies": { "@umbraco-ui/uui-base": "1.8.0-rc.0", - "@umbraco-ui/uui-button": "1.8.0-rc.0", + "@umbraco-ui/uui-button": "1.8.0-rc.2", "@umbraco-ui/uui-icon": "1.8.0-rc.0", "@umbraco-ui/uui-input": "1.8.0-rc.0" } @@ -7382,20 +7382,20 @@ } }, "node_modules/@umbraco-ui/uui-modal": { - "version": "1.8.0-rc.0", - "resolved": "https://registry.npmjs.org/@umbraco-ui/uui-modal/-/uui-modal-1.8.0-rc.0.tgz", - "integrity": "sha512-hJBFF0siAeXYh6tYkAvA8zQlDsOxKhdrPTEMwqU46zHgnDOSXQ6xvt6RqY9nLmXF2x4VT4L0HUrrWmK5YAN8Ug==", + "version": "1.8.0-rc.2", + "resolved": "https://registry.npmjs.org/@umbraco-ui/uui-modal/-/uui-modal-1.8.0-rc.2.tgz", + "integrity": "sha512-ISi2kRV729SHFXgpXnLlIjEJuOSBxo64gg8KMkXdFpUMXgfq6qlIWFrlY9D5L6m3c7mB3QfhDOejp0rwOeHO6A==", "dependencies": { "@umbraco-ui/uui-base": "1.8.0-rc.0" } }, "node_modules/@umbraco-ui/uui-pagination": { - "version": "1.8.0-rc.0", - "resolved": "https://registry.npmjs.org/@umbraco-ui/uui-pagination/-/uui-pagination-1.8.0-rc.0.tgz", - "integrity": "sha512-j28PjKCJ08b9jtPz91d5gZptDUZs6a4t3WLp8GcVV+obGB7v2+Cr9jBlpRu14iwXVFYRl/TN2MdGqVuFKBC55w==", + "version": "1.8.0-rc.2", + "resolved": "https://registry.npmjs.org/@umbraco-ui/uui-pagination/-/uui-pagination-1.8.0-rc.2.tgz", + "integrity": "sha512-T4vw2M5EJliqwy8YI03eA7pg+gcym9fyeO95eGQvriUV6/OB60CrzjEQ2tXREkVQq1oW3RIBEUEikUgRktMpwA==", "dependencies": { "@umbraco-ui/uui-base": "1.8.0-rc.0", - "@umbraco-ui/uui-button": "1.8.0-rc.0", + "@umbraco-ui/uui-button": "1.8.0-rc.2", "@umbraco-ui/uui-button-group": "1.8.0-rc.0" } }, @@ -7616,12 +7616,12 @@ } }, "node_modules/@umbraco-ui/uui-tabs": { - "version": "1.8.0-rc.0", - "resolved": "https://registry.npmjs.org/@umbraco-ui/uui-tabs/-/uui-tabs-1.8.0-rc.0.tgz", - "integrity": "sha512-81bvMrb2KqrMpruV83wuWGcI/5Zx+2FeD7ibpQ0HmdGg2EKiMX+XZCsEPyc+LD4/JImkVPs90PQmhBj8IzLBrQ==", + "version": "1.8.0-rc.2", + "resolved": "https://registry.npmjs.org/@umbraco-ui/uui-tabs/-/uui-tabs-1.8.0-rc.2.tgz", + "integrity": "sha512-MLtDabiXsOEqOxfgEuqU3ji1XTgY9ABbhqOHC23cFaaGBwlqAbUyi9hAMJhfso406vkQa/9t9A7yK8qpMqKdrA==", "dependencies": { "@umbraco-ui/uui-base": "1.8.0-rc.0", - "@umbraco-ui/uui-button": "1.8.0-rc.0", + "@umbraco-ui/uui-button": "1.8.0-rc.2", "@umbraco-ui/uui-popover-container": "1.8.0-rc.0", "@umbraco-ui/uui-symbol-more": "1.8.0-rc.0" } @@ -7643,24 +7643,24 @@ } }, "node_modules/@umbraco-ui/uui-toast-notification": { - "version": "1.8.0-rc.0", - "resolved": "https://registry.npmjs.org/@umbraco-ui/uui-toast-notification/-/uui-toast-notification-1.8.0-rc.0.tgz", - "integrity": "sha512-inBfJnrPtWgvUd4KBF168xB1EOI5B2HEK1GEaYYuKuFYZdeiJAZPP0GCgkiMC9K0YShIxh9H3q31iwvtWA1KhA==", + "version": "1.8.0-rc.2", + "resolved": "https://registry.npmjs.org/@umbraco-ui/uui-toast-notification/-/uui-toast-notification-1.8.0-rc.2.tgz", + "integrity": "sha512-ICvxWZVuDO1X/f1udYgtY1prHYbj26g3ZecKq2V2FVs9Ej5kYNIWU1nVGj6tWkdyKGnVPjoLfYmq/W8i9BJb9g==", "dependencies": { "@umbraco-ui/uui-base": "1.8.0-rc.0", - "@umbraco-ui/uui-button": "1.8.0-rc.0", + "@umbraco-ui/uui-button": "1.8.0-rc.2", "@umbraco-ui/uui-css": "1.8.0-rc.0", "@umbraco-ui/uui-icon": "1.8.0-rc.0", "@umbraco-ui/uui-icon-registry-essential": "1.8.0-rc.0" } }, "node_modules/@umbraco-ui/uui-toast-notification-container": { - "version": "1.8.0-rc.0", - "resolved": "https://registry.npmjs.org/@umbraco-ui/uui-toast-notification-container/-/uui-toast-notification-container-1.8.0-rc.0.tgz", - "integrity": "sha512-PA1IKPMJOSxYiOnSVyd2AhbovhSN/aU7d2Z/4/HFfvmnhedjsfRYzsgFDfoLUCenV7hN1dIxFNEEW6FxEpxEqQ==", + "version": "1.8.0-rc.2", + "resolved": "https://registry.npmjs.org/@umbraco-ui/uui-toast-notification-container/-/uui-toast-notification-container-1.8.0-rc.2.tgz", + "integrity": "sha512-iQ1xDQBgKrvTtCAUsT/3DJayCNVPWb+T9B5V+MyfuHnV9qOnmPtchs7l9r8cFwabOO5ZpxMke/tltsgMawwajQ==", "dependencies": { "@umbraco-ui/uui-base": "1.8.0-rc.0", - "@umbraco-ui/uui-toast-notification": "1.8.0-rc.0" + "@umbraco-ui/uui-toast-notification": "1.8.0-rc.2" } }, "node_modules/@umbraco-ui/uui-toast-notification-layout": { diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index ab0be09a9b..bd7d764b3f 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -170,7 +170,7 @@ "@types/diff": "^5.0.9", "@types/dompurify": "^3.0.5", "@types/uuid": "^9.0.8", - "@umbraco-ui/uui": "1.8.0-rc.1", + "@umbraco-ui/uui": "1.8.0-rc.2", "@umbraco-ui/uui-css": "1.8.0-rc.0", "base64-js": "^1.5.1", "diff": "^5.2.0", diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts index d3f34925ef..0da0ec53c4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts @@ -1,8 +1,8 @@ -import { UmbConfigRepository } from '../../repository/config/config.repository.js'; -import { html, ifDefined, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; -import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; -import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; +import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; +import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; @customElement('umb-input-date') export class UmbInputDateElement extends UUIFormControlMixin(UmbLitElement, '') { @@ -22,12 +22,6 @@ export class UmbInputDateElement extends UUIFormControlMixin(UmbLitElement, '') @property({ type: String }) displayValue?: string; - @property({ type: Boolean }) - offsetTime = false; - - @state() - private _offsetValue = 0; - @property({ type: String }) min?: string; @@ -37,42 +31,25 @@ export class UmbInputDateElement extends UUIFormControlMixin(UmbLitElement, '') @property({ type: Number }) step?: number; - private _configRepository = new UmbConfigRepository(this); - - constructor() { - super(); - } - connectedCallback(): void { super.connectedCallback(); - this.offsetTime ? this.#getOffset() : (this.displayValue = this.#UTCToLocal(this.value as string)); - } - - async #getOffset() { - const data = await this._configRepository.getServertimeOffset(); - if (!data) return; - this._offsetValue = data.offset; if (!this.value) return; - this.displayValue = this.#valueToServerOffset(this.value as string, true); + this.displayValue = this.#UTCToLocal(this.value as string); } - #localToUTC(d: string) { + #localToUTC(date: string) { if (this.type === 'time') { - return new Date(`${new Date().toJSON().slice(0, 10)} ${d}`).toISOString().slice(11, 16); + return new Date(`${new Date().toJSON().slice(0, 10)} ${date}`).toISOString().slice(11, 16); } else { - const date = new Date(d); - const isoDate = date.toISOString(); - return `${isoDate.substring(0, 10)}T${isoDate.substring(11, 19)}Z`; + return new Date(date).toJSON(); } } #UTCToLocal(d: string) { if (this.type === 'time') { const local = new Date(`${new Date().toJSON().slice(0, 10)} ${d}Z`) - .toLocaleTimeString(undefined, { - hourCycle: 'h23', - }) + .toLocaleTimeString(undefined, { hourCycle: 'h23' }) .slice(0, 5); return local; } else { @@ -89,58 +66,25 @@ export class UmbInputDateElement extends UUIFormControlMixin(UmbLitElement, '') } } - #dateToString(date: Date) { - return `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}T${( - '0' + date.getHours() - ).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`; - } + #onChange(event: UUIInputEvent) { + const newValue = event.target.value as string; + if (!newValue) return; - #valueToServerOffset(d: string, utc = false) { - if (this.type === 'time') { - const newDate = new Date(`${new Date().toJSON().slice(0, 10)} ${d}`); - const dateOffset = new Date( - newDate.setTime(newDate.getTime() + (utc ? this._offsetValue * -1 : this._offsetValue) * 60 * 1000), - ); - const time = dateOffset - .toLocaleTimeString(undefined, { - hourCycle: 'h23', - }) - .slice(0, 5); - return time; - } else { - const newDate = new Date(d.replace('Z', '')); - const dateOffset = new Date( - newDate.setTime(newDate.getTime() + (utc ? this._offsetValue * -1 : this._offsetValue) * 60 * 1000), - ); - return this.type === 'datetime-local' - ? this.#dateToString(dateOffset) - : this.#dateToString(dateOffset).slice(0, 10); - } - } - - #onChange(e: UUIInputEvent) { - e.stopPropagation(); - const picked = e.target.value as string; - if (!picked) { - this.value = ''; - this.displayValue = ''; - return; - } - this.value = this.offsetTime ? this.#valueToServerOffset(picked) : this.#localToUTC(picked); - this.displayValue = picked; - this.dispatchEvent(new CustomEvent('change')); + this.value = this.#localToUTC(newValue); + this.displayValue = newValue; + this.dispatchEvent(new UmbChangeEvent()); } render() { return html` + .min=${this.min} + .max=${this.max} + .step=${this.step} + .type=${this.type} + .value="${this.displayValue?.replace('Z', '')}" + @change=${this.#onChange}> `; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.DateTime.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.DateTime.ts index 4bf4469b90..48a98c08a1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.DateTime.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.DateTime.ts @@ -1,36 +1,10 @@ import type { ManifestPropertyEditorSchema } from '@umbraco-cms/backoffice/extension-registry'; -// TODO: We won't include momentjs anymore so we need to find a way to handle date formats export const manifest: ManifestPropertyEditorSchema = { type: 'propertyEditorSchema', name: 'Date/Time', alias: 'Umbraco.DateTime', meta: { defaultPropertyEditorUiAlias: 'Umb.PropertyEditorUi.DatePicker', - settings: { - properties: [ - { - alias: 'offsetTime', - label: 'Offset time', - description: - 'When enabled the time displayed will be offset with the servers timezone, this is useful for scenarios like scheduled publishing when an editor is in a different timezone than the hosted server', - propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle', - config: [ - { - alias: 'labelOff', - value: 'Adjust to local time', - }, - { - alias: 'labelOn', - value: 'Adjust to local time', - }, - { - alias: 'showLabels', - value: true, - }, - ], - }, - ], - }, }, }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/date-picker/property-editor-ui-date-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/date-picker/property-editor-ui-date-picker.element.ts index ebbbe7daa9..9912586cf8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/date-picker/property-editor-ui-date-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/date-picker/property-editor-ui-date-picker.element.ts @@ -1,43 +1,15 @@ -import type { UmbPropertyEditorConfigCollection } from '../../index.js'; import { UmbPropertyValueChangeEvent } from '../../index.js'; -import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; +import type { UmbPropertyEditorConfigCollection } from '../../index.js'; +import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbInputDateElement } from '@umbraco-cms/backoffice/components'; +import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; /** * @element umb-property-editor-ui-date-picker */ @customElement('umb-property-editor-ui-date-picker') export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement { - private _value?: Date; - private _valueString?: string; - - @property() - set value(value: string | undefined) { - if (value) { - const d = new Date(value); - this._value = d; - this._valueString = `${d.getFullYear()}-${ - d.getMonth() + 1 - }-${d.getDate()}T${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`; - } else { - this._value = undefined; - this._valueString = undefined; - } - } - get value() { - return this._valueString; - } - - private _onInput(e: InputEvent) { - const dateField = e.target as HTMLInputElement; - this.value = dateField.value; - this.dispatchEvent(new UmbPropertyValueChangeEvent()); - } - - private _format?: string; - @state() private _inputType: UmbInputDateElement['type'] = 'datetime-local'; @@ -50,29 +22,34 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implemen @state() private _step?: number; - private _offsetTime?: boolean; + @property() + set value(value: string | undefined) { + if (value) { + // NOTE: If the `value` contains a space, then it doesn't contain the timezone, so may not be parsed as UTC. [LK] + const datetime = !value.includes(' ') ? value : value + ' +00'; + this.#value = new Date(datetime).toJSON(); + } + } + get value() { + return this.#value; + } + #value?: string; public set config(config: UmbPropertyEditorConfigCollection | undefined) { if (!config) return; const oldVal = this._inputType; // Format string prevalue/config - this._format = config.getValueByAlias('format'); - const pickTime = this._format?.includes('H') || this._format?.includes('m'); - if (pickTime) { - this._inputType = 'datetime-local'; - } else { - this._inputType = 'date'; - } + const format = config.getValueByAlias('format'); + const hasTime = format?.includes('H') || format?.includes('m'); + this._inputType = hasTime ? 'datetime-local' : 'date'; // Based on the type of format string change the UUI-input type const timeFormatPattern = /^h{1,2}:m{1,2}(:s{1,2})?\s?a?$/gim; - if (this._format?.toLowerCase().match(timeFormatPattern)) { + if (format?.toLowerCase().match(timeFormatPattern)) { this._inputType = 'time'; } - //TODO: - this._offsetTime = config.getValueByAlias('offsetTime'); this._min = config.getValueByAlias('min'); this._max = config.getValueByAlias('max'); this._step = config.getValueByAlias('step'); @@ -80,16 +57,22 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implemen this.requestUpdate('_inputType', oldVal); } + #onChange(event: CustomEvent & { target: HTMLInputElement }) { + this.value = event.target.value; + this.dispatchEvent(new UmbPropertyValueChangeEvent()); + } + render() { - return html``; + return html` + + + `; } }