inviton-powerduck 0.0.182 → 0.0.184

package/common/extensions/temporal-extensions.ts

@@ -68,7 +68,31 @@ function fromDateImpl(this: typeof Temporal.PlainDateTime, date: Date): Temporal
 
 export const utcEpochMilliseconds = Symbol('utcEpochMilliseconds');
 function utcEpochMillisecondsImpl(this: Temporal.PlainDateTime): number {
-	return this.toZonedDateTime('UTC').epochMilliseconds;
+	if (this == null) {
+		return null;
+	}
+
+	let y = this.year;
+	let m = this.month;
+	if (m <= 2) {
+		y -= 1;
+		m += 12;
+	}
+
+	// Algorithm from Howard Hinnant's civil date conversion
+	const era = Math.floor(y / 400);
+	const yoe = y - era * 400;
+	const doy = Math.floor((153 * (m - 3) + 2) / 5) + this.day - 1;
+	const doe = yoe * 365 + Math.floor(yoe / 4) - Math.floor(yoe / 100) + doy;
+	const daysSinceEpoch = era * 146097 + doe - 719468;
+
+	const msOfDay
+		= this.hour * 3_600_000
+			+ this.minute * 60_000
+			+ this.second * 1_000
+			+ (this.millisecond ?? 0);
+
+	return daysSinceEpoch * 86_400_000 + msOfDay;
 }
 
 export const toJsDate = Symbol('toJsDate');

package/common/utils/temporal-utils.ts

@@ -38,6 +38,43 @@ export default class TemporalUtils {
 	}
 
 	static fromEpochMs(val: number): Temporal.PlainDateTime {
-		return Temporal.Instant.fromEpochMilliseconds(val).toZonedDateTimeISO('UTC').toPlainDateTime();
+		const MS_PER_DAY = 86_400_000;
+
+		let daysSinceEpoch = Math.floor(val / MS_PER_DAY);
+		let msInDay = val - daysSinceEpoch * MS_PER_DAY;
+		if (msInDay < 0) {
+			msInDay += MS_PER_DAY;
+			daysSinceEpoch -= 1;
+		}
+
+		// Convert daysSinceEpoch → Y-M-D
+		const z = daysSinceEpoch + 719468;
+		const era = Math.floor(z / 146097);
+		const doe = z - era * 146097;
+		const yoe = Math.floor((doe - Math.floor(doe / 1460) + Math.floor(doe / 36524) - Math.floor(doe / 146096)) / 365);
+		const y = yoe + era * 400;
+		const doy = doe - (365 * yoe + Math.floor(yoe / 4) - Math.floor(yoe / 100));
+		const mp = Math.floor((5 * doy + 2) / 153);
+		const day = doy - Math.floor((153 * mp + 2) / 5) + 1;
+		const month = mp + (mp < 10 ? 3 : -9);
+		const year = y + (month <= 2 ? 1 : 0);
+
+		// Compute time from milliseconds in day
+		const hour = Math.floor(msInDay / 3_600_000);
+		const minute = Math.floor((msInDay % 3_600_000) / 60_000);
+		const second = Math.floor((msInDay % 60_000) / 1000);
+		const millisecond = msInDay % 1000;
+
+		return new Temporal.PlainDateTime(
+			year,
+			month,
+			day,
+			hour,
+			minute,
+			second,
+			millisecond,
+			0,
+			0,
+		);
 	}
 }

package/components/dropdown/index.tsx

@@ -1,9 +1,9 @@
 import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-item';
 import type { FormItemWrapperArgs, MarginType } from '../form/form-item-wrapper';
-import { globalState } from '../../app/global-state';
 import Sortable from 'sortablejs';
 import { h as _h, h, render, VNodeChild } from 'vue';
 import { Prop, toNative } from 'vue-facing-decorator';
+import { globalState } from '../../app/global-state';
 import PowerduckState from '../../app/powerduck-state';
 import TsxComponent, { Component } from '../../app/vuetsx';
 import { remove } from '../../common/extensions/array-extensions';
@@ -327,16 +327,30 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 		return retArr;
 	}
 
-	getMobileSelectionText(): string {
+	getMobileSelectionText(): { text: string; placeholder: boolean } {
 		const opts = this.getOptions();
 		const selectedItems = this.getSelectedItems();
 
 		if (selectedItems.length > 2 || (this.mobileShortMode == true && selectedItems.length > 0)) {
-			return PowerduckState.getResourceValue('itemsOutOfArray').replace('{0}', selectedItems.length.toString()).replace('{1}', opts.length.toString());
+			return {
+				text: PowerduckState.getResourceValue('itemsOutOfArray').replace('{0}', selectedItems.length.toString()).replace('{1}', opts.length.toString()),
+				placeholder: false,
+			};
 		} else if (selectedItems.length == 1) {
-			return selectedItems[0].text;
+			return {
+				placeholder: false,
+				text: selectedItems[0].text,
+			};
+		} else if ((selectedItems == null || selectedItems.length == 0) && this.placeholder?.length > 0) {
+			return {
+				placeholder: true,
+				text: this.placeholder,
+			};
 		} else {
-			return selectedItems.map(p => p.text).join(', ');
+			return {
+				placeholder: false,
+				text: selectedItems.map(p => p.text).join(', '),
+			};
 		}
 	}
 
@@ -418,21 +432,14 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 	}
 
 	renderMobileComponent(h) {
-		let selectedText = this.getMobileSelectionText();
-		if (selectedText == null || selectedText.length == 0) {
-			selectedText = this.placeholder || '';
-		}
-
-		if (isNullOrEmpty(selectedText) && this.multiselect == true) {
-			selectedText = `[${PowerduckState.getResourceValue('all')}]`;
-		}
+		const selText = this.getMobileSelectionText();
 
 		return (
 			<span ref="mobileModeRoot" onClick={e => this.showMobilePicker(h)} class={`select2 select2-container select2-container--default s2-pseudo maxwidth-input ${this.getRootBaseCssClass()}`} dir="ltr">
 				<span class="selection">
 					<span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true">
-						<span class="select2-selection__rendered mbl-ddl-text" title={selectedText} style="font-size: inherit;">
-							{selectedText}
+						<span class={`select2-selection__rendered mbl-ddl-text ${selText.placeholder ? 'mbl-ddl-placeholder' : 'mbl-ddl-selval'}`} title={selText.text} style="font-size: inherit;">
+							{selText.text}
 						</span>
 						<span class="select2-selection__arrow" role="presentation">
 							<b role="presentation"></b>
@@ -449,10 +456,10 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 			const self = this;
 			return (row) => {
 				const retVal = $(`<span class="s2-ri-withtb">${row.text
-					}<button class="s2-trailing-button ${self.trailingButton.cssClass || ''
-					} btn-sm">${self.trailingButton.icon != null ? `<i class="${self.trailingButton.icon}"></i> ` : ''
-					}${self.trailingButton.text || ''
-					}</button></span>`);
+				}<button class="s2-trailing-button ${self.trailingButton.cssClass || ''
+				} btn-sm">${self.trailingButton.icon != null ? `<i class="${self.trailingButton.icon}"></i> ` : ''
+				}${self.trailingButton.text || ''
+				}</button></span>`);
 				retVal.find('button').click((e) => {
 					try {
 						clearTimeout(self.preventDefaultTimeout);
@@ -543,10 +550,10 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 			useListviewBuilder: false,
 			formatSelection: this.customRenderSelectionResult != null
 				? this.handleCustomRenderResult(
-					h,
-					this.customRenderSelectionResult,
-					'mobile',
-				)
+						h,
+						this.customRenderSelectionResult,
+						'mobile',
+					)
 				: null,
 			formatResult: this.getCustomFormatOptions(h, 'mobile'),
 			onItemSelected: (items, exclusivity) => {
@@ -566,16 +573,17 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 
 	setMobilePickerInputText(h: any, items: DropdownDisplayArgs[]): void {
 		this.$nextTick(() => {
-			let selectedText = this.getMobileSelectionText();
+			const textVal = this.getMobileSelectionText();
 			const textContext = $(this.$el).find('.mbl-ddl-text') as any;
-			const isPlaceholder = (items || []).length == 0;
-
-			if (isNullOrEmpty(selectedText)) {
-				selectedText = this.placeholder;
-			}
+			const isPlaceholder = textVal.placeholder;
+			const selectedText = textVal.text;
 
-			if (isNullOrEmpty(selectedText) && this.multiselect == true) {
-				selectedText = `[${PowerduckState.getResourceValue('all')}]`;
+			if (isPlaceholder) {
+				textContext.text(selectedText);
+				textContext.addClass('mbl-ddl-placeholder').removeClass('mbl-ddl-selval');
+				return;
+			} else {
+				textContext.removeClass('mbl-ddl-placeholder').addClass('mbl-ddl-selval');
 			}
 
 			if (this.customRenderSelectionResult == null) {

package/components/input/daterange-picker.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable no-useless-call */
+/* eslint-disable ts/no-this-alias */
 import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-item';
 import type { FormItemWrapperArgs, MarginType } from '../form/form-item-wrapper';
 import { Temporal } from '@js-temporal/polyfill';
@@ -47,6 +49,7 @@ interface DaterangePickerArgs extends FormItemWrapperArgs {
 	minDate?: Temporal.PlainDateTime;
 	alwaysOpen?: boolean;
 	singleDate?: boolean;
+	pickerRootCssClass?: string
 	maxDate?: Temporal.PlainDateTime;
 	prevIcon?: string;
 	nextIcon?: string;
@@ -71,6 +74,7 @@ export interface DaterangeChangedArgs {
 }
 
 const DATE_FORMAT_FOR_RANGE_PICKER = (() => {
+	// eslint-disable-next-line no-restricted-syntax
 	const dummyDate = new Date(Date.UTC(
 		2022,
 		11,
@@ -101,6 +105,7 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 	@Prop() inputReadOnly?: boolean;
 	@Prop() alwaysOpen!: boolean;
 	@Prop() singleDate!: boolean;
+	@Prop() pickerRootCssClass!: string
 	@Prop() wrap!: boolean;
 	@Prop() hint: string;
 	@Prop() appendIcon: string;
@@ -239,6 +244,7 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 			singleMonth: singleMonth == true,
 			alwaysOpen: alwaysOpen == true,
 			singleDate: this.singleDate == true,
+			rootCssClass: this.pickerRootCssClass,
 			startOfWeek: DateInputHelper.getStartOfWeek() == 0 ? 'sunday' : 'monday',
 			separator: self.getSeparator(),
 			hideYearInMonthName: this.hideYearInMonthName == true,
@@ -253,9 +259,7 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 			maxDaysTooltip: this.maxDaysTooltip,
 			calendarPlacement,
 			container,
-			displayMode: () => {
-				return 'below-input';
-			},
+			displayMode: () => 'below-input',
 			leftOffset: () => {
 				if (this.prependIcon == null) {
 					return 0;

package/components/input/plugins/daterangepicker/daterangepicker.css

@@ -169,7 +169,7 @@
 	height: 20px;
 }
 
-.date-range-picker-wrapper .month-wrapper > table {
+.date-range-picker-wrapper .month-wrapper>table {
 	padding-top: 15px;
 }
 
@@ -557,7 +557,7 @@
 	border-right: 0.667px solid #dfe3f1;
 }
 
-.date-range-picker-wrapper .month-wrapper table td > div {
+.date-range-picker-wrapper .month-wrapper table td>div {
 	background-color: inherit !important;
 	line-height: 1.9;
 	margin-left: 5px;
@@ -626,21 +626,8 @@
 }
 
 .date-range-picker-wrapper table .caption,
-.daterangepicker-modal
-	.date-range-picker-root.inline-wrapper.drpc-inline
-	.month-wrapper
-	.month-wrapper-inner-common
-	table
-	th
-	> span.select-wrapper,
-.daterangepicker-modal
-	.date-range-picker-root.inline-wrapper.drpc-inline
-	.month-wrapper
-	.month-wrapper-inner-common
-	table
-	th
-	> span.select-wrapper
-	select {
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common table th>span.select-wrapper,
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common table th>span.select-wrapper select {
 	height: 40px;
 	color: #393562;
 	height: 36px;
@@ -667,65 +654,25 @@
 
 .daterangepicker-dummy-row-item {
 	visibility: hidden;
-	pointer-events: none;
 }
 
-.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common {
-}
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common {}
 
-.daterangepicker-modal
-	.date-range-picker-root.inline-wrapper.drpc-inline
-	.month-wrapper
-	.month-wrapper-inner-common
-	table {
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common table {
 	width: 100%;
 }
 
-.daterangepicker-modal
-	.date-range-picker-root.inline-wrapper.drpc-inline
-	.month-wrapper
-	.month-wrapper-inner-common
-	table
-	td,
-.daterangepicker-modal
-	.date-range-picker-root.inline-wrapper.drpc-inline
-	.month-wrapper
-	.month-wrapper-inner-common
-	table
-	th {
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common table td,
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common table th {
 	width: 99999px;
 	text-align: center;
 	font-weight: 400;
 }
 
-.daterangepicker-modal
-	.date-range-picker-root.inline-wrapper.drpc-inline
-	.month-wrapper
-	.month-wrapper-inner-common
-	table
-	td
-	> div,
-.daterangepicker-modal
-	.date-range-picker-root.inline-wrapper.drpc-inline
-	.month-wrapper
-	.month-wrapper-inner-common
-	table
-	th
-	> div,
-.daterangepicker-modal
-	.date-range-picker-root.inline-wrapper.drpc-inline
-	.month-wrapper
-	.month-wrapper-inner-common
-	table
-	td
-	> span,
-.daterangepicker-modal
-	.date-range-picker-root.inline-wrapper.drpc-inline
-	.month-wrapper
-	.month-wrapper-inner-common
-	table
-	th
-	> span {
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common table td>div,
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common table th>div,
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common table td>span,
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common table th>span {
 	margin: 0;
 	margin: auto;
 	font-size: 14px;
@@ -748,4 +695,4 @@
 	bottom: 0;
 	height: auto !important;
 	opacity: 0.001;
-}
+}

package/components/input/plugins/daterangepicker/jquery.daterangepicker.ts

@@ -386,6 +386,7 @@ import { globalState } from '../../../../app/global-state';
 		// attribute bags for day cells are unknown
 		dayDivAttrs: any[];
 		dayTdAttrs: any[];
+		rootCssClass: string
 
 		selectForward: boolean;
 		selectBackward: boolean;
@@ -2551,7 +2552,7 @@ import { globalState } from '../../../../app/global-state';
 		}
 
 		function createDom() {
-			let html = '<div class="date-range-picker-root"><div class="drpc-modal-close-button">x</div><div class="date-range-picker-wrapper';
+			let html = '<div class="date-range-picker-root ' + (opt.rootCssClass || '') + '"><div class="drpc-modal-close-button">x</div><div class="date-range-picker-wrapper';
 			if (opt.extraClass) { html += ` ${opt.extraClass} `; }
 
 			if (opt.singleDate) { html += ' single-date '; }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "inviton-powerduck",
 	"type": "module",
-	"version": "0.0.182",
+	"version": "0.0.184",
 	"files": [
 		"app/",
 		"common/",