inviton-powerduck 0.0.162 → 0.0.164

package/components/bootstrap-toggle/index.tsx

@@ -43,7 +43,7 @@ class BootstrapToggleComponent extends TsxComponent<BootstrapToggleArgs> impleme
 	@Prop() appendClicked: () => void;
 	@Prop() prependClicked: () => void;
 	@Prop() changed: (newValue: boolean) => void;
-	@Prop() enabled!: boolean;
+	@Prop({ default: true }) enabled!: boolean;
 	@Prop() captionTrue!: string;
 	@Prop() captionFalse!: string;
 	@Prop() marginType?: MarginType;
@@ -177,8 +177,11 @@ class BootstrapToggleComponent extends TsxComponent<BootstrapToggleArgs> impleme
 					labelButtons={this.labelButtons}
 					subtitle={this.subtitle}
 				>
-
-					<div class={`bs-toggle btn btn-light ${this.size || ''} ${this.value == true ? 'on' : 'off'}`} data-toggle="toggle" style={`width: ${width}px;`} onClick={() => { this.handleValueToggle(); }}>
+					<div class={`bs-toggle btn btn-light ${this.size || ''} ${this.value == true ? 'on' : 'off'} ${this.enabled === false ? 'disabled' : ''}`} data-toggle="toggle" style={`width: ${width}px;`} onClick={() => {
+						if (this.enabled != false) {
+							this.handleValueToggle();
+						}
+					}}>
 						<div class="bs-toggle-group">
 							<label class={`btn btn-${PowerduckState.getBootstrapOnStyle()} ${this.size || ''} bs-toggle-on`}>{this.getCaptionTrue()}</label>
 							<label class={`btn btn-light ${this.size || ''} bs-toggle-off`}>{this.getCaptionFalse()}</label>

package/components/image-crop/image-cropping-modal.tsx

@@ -96,6 +96,8 @@ class ImageCropModalComponent extends TsxComponent<ImageCropModalBindingArgs> im
 			maxWidth = containerWidth;
 		}
 
+		// eslint-disable-next-line ts/no-this-alias
+		const mySelf = this;
 		const start = TemporalUtils.dateNowMs();
 		const img = new Image();
 		img.onload = () => {
@@ -138,7 +140,7 @@ class ImageCropModalComponent extends TsxComponent<ImageCropModalBindingArgs> im
 
 				(imgElem as any).Jcrop(cropParams, function (this: any) {
 					(window as any).currentJCrop = this;
-					this.blocked = false;
+					mySelf.blocked = false;
 				});
 			});
 		};

package/components/input/daterange-picker.tsx

@@ -48,6 +48,8 @@ interface DaterangePickerArgs extends FormItemWrapperArgs {
 	singleMonth?: boolean;
 	calendarPlacement?: 'body' | 'inline' | 'input-container-leftalign' | 'input-container-rightalign';
 	ensureMonthContinuity?: boolean;
+	monthSelect?: boolean;
+	yearSelect?: boolean;
 	customInputText?: () => string;
 	customTooltip?: (dayCount: number) => string;
 	maxDays?: number;
@@ -118,6 +120,8 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 	@Prop() hideYearInMonthName?: boolean;
 	@Prop() disabled!: boolean;
 	@Prop() readOnly?: boolean;
+	@Prop() monthSelect!: boolean;
+	@Prop() yearSelect!: boolean;
 	@Prop() customTooltip?: (dayCount: number) => string;
 	@Prop() maxDays?: number;
 	@Prop() maxDaysTooltip?: (maxDays: number) => string;
@@ -171,6 +175,8 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 			autoClose: self.autoClose,
 			ensureMonthContinuity: self.ensureMonthContinuity,
 			maxDays: this.maxDays,
+			monthSelect: this.monthSelect != false,
+			yearSelect: this.yearSelect != false,
 			getCellHtml: this.getCellHtml,
 			maxDaysTooltip: this.maxDaysTooltip,
 			calendarPlacement: this.calendarPlacement,

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

@@ -626,3 +626,10 @@
 .date-range-picker-root .date-range-length-tip.drp-tooltip-error {
 	background-color: #b94c4c;
 }
+
+.drp-date-switch.month-name {
+	border: 0;
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+}

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

@@ -405,6 +405,9 @@ import { utcEpochMilliseconds } from '../../../../common/extensions/temporal-ext
 		defaultEndTime: Temporal.PlainDateTime
 		ensureMonthContinuity: boolean
 
+		monthSelect: boolean
+		yearSelect: boolean
+
 		month1: Temporal.PlainDateTime
 		month2: Temporal.PlainDateTime
 
@@ -501,6 +504,8 @@ import { utcEpochMilliseconds } from '../../../../common/extensions/temporal-ext
 				customCloseAnimation: null,
 				customArrowPrevSymbol: null,
 				customArrowNextSymbol: null,
+				monthSelect: false,
+				yearSelect: false,
 			},
 			opt,
 		);
@@ -1873,11 +1878,127 @@ import { utcEpochMilliseconds } from '../../../../common/extensions/temporal-ext
 
 		function showMonth(date: Temporal.PlainDateTime, month: 'month1' | 'month2') {
 			const monthName = nameMonth(date.month);
-			box.find(`.${month} .month-name`).html(`${monthName}${opt.hideYearInMonthName ? '' : ` ${date.year}`}`);
+			var selectableMonthElement = generateSelectableMonthElement(date, month);
+			var selectableYearElement = generateSelectableYearElement(date, month);
+			box.find(`.${month} .month-name`).html(`${opt.monthSelect ? selectableMonthElement : monthName}${opt.hideYearInMonthName ? '' : ` ${opt.yearSelect ? selectableYearElement : date.year}`}`);
 			box.find(`.${month} tbody`).html(createMonthHTML(date));
 			opt[month] = date;
 			updateSelectableRange();
 			bindDayEvents();
+			bindSelectEvents();
+		}
+
+		function generateSelectableMonthElement(date: Temporal.PlainDateTime, month: 'month1' | 'month2'): string | null {
+			const monthName = nameMonth(date.month);
+			var nonSelectableMonth = '<div class="month-element">' + monthName + '</div>';
+
+			if (!opt.monthSelect) {
+				return null;
+			}
+
+			var startDate = opt.startDate ? opt.startDate.add({
+				months: !opt.singleMonth && month === 'month2' ? 1 : 0
+			}) : false;
+			var endDate = opt.endDate ? opt.endDate.add({
+				months: !opt.singleMonth && month === 'month1' ? -1 : 0
+			}) : false;
+
+			var minSelectableMonth = startDate && date.year == startDate.year ? startDate.month : 1;
+			var maxSelectableMonth = endDate && date.year == endDate.year ? endDate.month : 12;
+			var minVisibleMonth = Math.min(minSelectableMonth, date.month);
+			var maxVisibleMonth = Math.max(maxSelectableMonth, date.month);
+
+			if (minVisibleMonth === maxVisibleMonth) {
+				return nonSelectableMonth;
+			}
+
+			var selectData = generateSelectData(
+				{
+					minSelectable: minSelectableMonth,
+					maxSelectable: maxSelectableMonth,
+					minVisible: minVisibleMonth,
+					maxVisible: maxVisibleMonth,
+				},
+				date.month,
+				function (value: number): string { return nameMonth(value); }
+			)
+			return generateSelect('month', selectData);
+		}
+
+		function generateSelectableYearElement(date: Temporal.PlainDateTime, month: 'month1' | 'month2'): string | null {
+			const year = date.year;
+			var nonSelectableYear = '<div class="year-element">' + year + '</div>';
+
+			if (!opt.yearSelect) {
+				return null;
+			}
+
+			var startDate = opt.startDate ? opt.startDate.add({
+				months: !opt.singleMonth && month === 'month2' ? 1 : 0
+			}) : false;
+			var endDate = opt.endDate ? opt.endDate.add({
+				months: !opt.singleMonth && month === 'month1' ? -1 : 0
+			}) : false;
+			var range = [year - 10, year + 10];
+
+			var minSelectableYear = startDate ? Math.max(range[0], startDate.year) : Math.min(range[0], year);
+			var maxSelectableYear = endDate ? Math.min(range[1], endDate.year) : Math.max(range[1], year);
+			var minVisibleYear = Math.min(minSelectableYear, year);
+			var maxVisibleYear = Math.max(maxSelectableYear, year);
+
+			if (minVisibleYear === maxVisibleYear) {
+				return nonSelectableYear;
+			}
+
+			var selectData = generateSelectData(
+				{
+					minSelectable: minSelectableYear,
+					maxSelectable: maxSelectableYear,
+					minVisible: minVisibleYear,
+					maxVisible: maxVisibleYear,
+				},
+				year,
+				function (value: number): number { return value; }
+			);
+
+			return generateSelect('year', selectData);
+		}
+
+		function generateSelectData(range: { minVisible: number, maxVisible: number, minSelectable: number, maxSelectable: number }, current: number, valueBeautifier: (value: number) => string | number): Array<{ value: number, text: string | number, selected: boolean, disabled: boolean }> {
+			var data: Array<{ value: number, text: string | number, selected: boolean, disabled: boolean }> = [];
+			valueBeautifier = valueBeautifier || function (value: number): number { return value; };
+
+			for (var i = range.minVisible; i <= range.maxVisible; i++) {
+				data.push({
+					value: i,
+					text: valueBeautifier(i),
+					selected: i === current,
+					disabled: ((i < range.minSelectable) || (i > range.maxSelectable)),
+				});
+			}
+
+			return data;
+		}
+		function generateSelect(name: string, data: Array<{ value: number, text: string | number, selected: boolean, disabled: boolean }>): string {
+			var select = '<span class="select-wrapper"><select class="drp-date-switch month-name ' + name + '" name="' + name + '">';
+			var current: string | number = '';
+
+			for (var i = 0, l = data.length; i < l; i++) {
+				var item = data[i];
+				select += '<option value="' + item.value + '"' +
+					(item.selected ? ' selected' : '') +
+					(item.disabled ? ' disabled' : '') + '>' +
+					item.text + '</option>';
+
+				if (item.selected) {
+					current = item.text;
+				}
+			}
+
+			// select += '</select><span class="select-display">' + current + '</span></div>';
+			select += '</select><span class="select-display"></span></span>';
+
+			return select;
 		}
 
 		function bindDayEvents(): void {
@@ -1901,6 +2022,30 @@ import { utcEpochMilliseconds } from '../../../../common/extensions/temporal-ext
 			});
 		}
 
+		function bindSelectEvents(): void {
+			box.find('select.month').unbind('change').change(function (this: any) {
+				const selectedMonth = parseInt($(this).val());
+				const selectedText = $(this).find('option:selected').text();
+				$(this).siblings('.select-display').text(selectedText);
+
+				const isMonth2 = $(this).closest('table').hasClass('month2');
+				const currentDate = isMonth2 ? opt.month2 : opt.month1;
+				const newDate = currentDate.with({ month: selectedMonth });
+				showMonth(newDate, isMonth2 ? 'month2' : 'month1');
+			});
+
+			box.find('select.year').unbind('change').change(function (this: any) {
+				const selectedYear = parseInt($(this).val());
+				const selectedText = $(this).find('option:selected').text();
+				$(this).siblings('.select-display').text(selectedText);
+
+				const isMonth2 = $(this).closest('table').hasClass('month2');
+				const currentDate = isMonth2 ? opt.month2 : opt.month1;
+				const newDate = currentDate.with({ year: selectedYear });
+				showMonth(newDate, isMonth2 ? 'month2' : 'month1');
+			});
+		}
+
 		function showTime(date: Temporal.PlainDateTime, name: 'time1' | 'time2') {
 			box.find(`.${name}`).append(getTimeHTML());
 			renderTime(name, date);

package/components/swiper/swiper.tsx

@@ -1,6 +1,7 @@
 import type { Vue } from 'vue-facing-decorator';
 import SwiperCore from 'swiper';
-import { Navigation, Pagination } from 'swiper/modules';
+import { Navigation, Pagination, Autoplay } from 'swiper/modules';
+import { AutoplayOptions } from 'swiper/types';
 import { Prop, toNative } from 'vue-facing-decorator';
 import TsxComponent, { Component } from '../../app/vuetsx';
 import 'swiper/css';
@@ -13,6 +14,7 @@ interface IVue extends VueType { }
 SwiperCore.use([
 	Navigation,
 	Pagination,
+	Autoplay,
 ]);
 
 interface SwiperArgs {
@@ -24,7 +26,7 @@ interface SwiperArgs {
 	freeMode?: boolean;
 	grabCursor?: boolean;
 	speed?: number;
-	autoplay?: boolean;
+	autoplay?: AutoplayOptions;
 	preventClicks?: boolean;
 	navigation?: { nextEl: () => HTMLElement | string | IVue; prevEl: () => HTMLElement | string | IVue };
 	slideChanged?: (e?: SwiperSlideChangedArgs) => void;
@@ -47,7 +49,6 @@ export interface SwiperZoomArgs {
 
 @Component
 class SwiperComponent extends TsxComponent<SwiperArgs> implements SwiperArgs {
-	@Prop() key: string;
 	@Prop() hasPagination?: boolean;
 	@Prop() direction?: 'horizontal' | 'vertical';
 	@Prop() slidesPerView?: 'auto' | number;
@@ -56,7 +57,7 @@ class SwiperComponent extends TsxComponent<SwiperArgs> implements SwiperArgs {
 	@Prop() freeMode?: boolean;
 	@Prop() grabCursor?: boolean;
 	@Prop() speed: number;
-	@Prop() autoplay: boolean;
+	@Prop() autoplay: AutoplayOptions;
 	@Prop() preventClicks: boolean;
 	@Prop() navigation?: { nextEl: () => HTMLElement | string | IVue; prevEl: () => HTMLElement | string | IVue };
 	@Prop() zoom?: boolean | SwiperZoomArgs;

package/package.json

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