inviton-powerduck 0.0.158 → 0.0.160

package/app/css/input-effects.css

@@ -0,0 +1,77 @@
+.pd-dropdown-open-animation {
+    animation: pdInputShowAnimationIn 180ms cubic-bezier(.2, .8, .2, 1);
+    transform-origin: top center;
+}
+
+.pd-dropdown-open-animation-above {
+    animation: pdInputShowAnimationInAbove 180ms cubic-bezier(.2, .8, .2, 1);
+    transform-origin: bottom center;
+}
+
+.pd-dropdown-close-animation {
+    animation: pdInputHideAnimationInAbove 160ms cubic-bezier(.4, .2, .2, 1);
+    transform-origin: top center;
+}
+
+.pd-dropdown-close-animation-above {
+    animation: pdInputHideAnimationInAboveAbove 160ms cubic-bezier(.4, .2, .2, 1);
+    transform-origin: bottom center;
+}
+
+
+@keyframes pdInputShowAnimationIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-6px) scale(.95);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes pdInputShowAnimationInAbove {
+    0% {
+        opacity: 0;
+        transform: translateY(6px) scale(.95);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes pdInputHideAnimationInAbove {
+    0% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(-6px) scale(.96);
+    }
+}
+
+@keyframes pdInputHideAnimationInAboveAbove {
+    0% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(6px) scale(.96);
+    }
+}
+
+
+@media (prefers-reduced-motion: reduce) {
+
+    .pd-dropdown-open-animation,
+    .pd-dropdown-open-animation-above-above {
+        animation: none;
+    }
+}

package/common/validation.ts

@@ -1,6 +1,7 @@
 import type { Validation } from '@vuelidate/core';
 import type { PowerduckViewModelBase } from './base-component';
 import type { IValidationSet, ValidationRuleset, ValidationState } from './static-wrappers/interfaces/validation-interface';
+import { Temporal } from '@js-temporal/polyfill';
 import {
 	alpha,
 	alphaNum,
@@ -21,10 +22,11 @@ import {
 	requiredUnless,
 	url,
 } from '@vuelidate/validators';
+import { unref } from 'vue';
 import PowerduckState from '../app/powerduck-state';
+import { capitalize } from './extensions/string-extensions';
 import LocalizedValueHelper from './localized-value-helper';
 import { isNullOrEmpty } from './utils/is-null-or-empty';
-import { capitalize } from './extensions/string-extensions';
 
 const getFirstUnsattisfiedValidatorName = (valProp: Validation): string | null => {
 	const errors = valProp?.$errors || [];
@@ -134,6 +136,43 @@ export class ValidationHelper {
 	}
 }
 
+const customReq = (value: any): boolean => {
+	value = unref(value);
+
+	if (Array.isArray(value)) {
+		return !!value.length;
+	}
+
+	if (value === undefined || value === null) {
+		return false;
+	}
+
+	if (value === false) {
+		return true;
+	}
+
+	if (value instanceof Date) {
+		return !isNaN(value.getTime());
+	}
+
+	if (typeof Temporal !== 'undefined') {
+		if (value instanceof Temporal.PlainDateTime || value instanceof Temporal.PlainDate || value instanceof Temporal.ZonedDateTime || value instanceof Temporal.Instant) {
+			return true;
+		}
+	}
+
+	if (typeof value === 'object') {
+		// eslint-disable-next-line no-unreachable-loop
+		for (const _ in value) {
+			return true;
+		}
+
+		return false;
+	}
+
+	return !!String(value).length;
+};
+
 export class ValidationBuilder {
 	private _validationArgs: any = {};
 
@@ -150,8 +189,30 @@ export class ValidationBuilder {
 		return this;
 	}
 
-	requiredIf?(field: string | ((vm: any, parentVm?: PowerduckViewModelBase) => any)): ValidationBuilder {
-		this._validationArgs.requiredIf = requiredIf(field as string);
+	requiredIf(field: string | ((vm: any, parentVm?: PowerduckViewModelBase) => boolean)): ValidationBuilder {
+		const requireIf = (propOrFunction: boolean | string | ((...args: any[]) => boolean)) => {
+			const validate = (prop: any, val: any) => prop ? customReq(typeof val === 'string' ? val.trim() : val) : true;
+
+			return function (
+				this: any,
+				value: any,
+				parentVM: any,
+			) {
+				if (typeof propOrFunction != 'function') {
+					return validate((propOrFunction), value);
+				}
+
+				const result = propOrFunction.call(
+					this,
+					value,
+					parentVM,
+				);
+				return validate(result, value);
+			};
+		};
+
+		this._validationArgs.requiredIf = requireIf(field);
+
 		return this;
 	}
 

package/components/dropdown/country-dropdown.tsx

@@ -29,7 +29,7 @@ function getFlaggedResult(h, state, originator): void {
 	if (originator == 'mobile') {
 		return (<span>{state.text}</span>);
 	} else {
-		return (<span><span class={`fi fi-${state.dataRow.twoLetters}`}></span>&nbsp;&nbsp;{state.text}</span>);
+		return (<span><span class={`fi fi-${state.twoLetters}`}></span>&nbsp;&nbsp;{state.text}</span>);
 	}
 }
 

package/components/dropdown/index.tsx

@@ -14,6 +14,7 @@ import FilterableSelect from './mobile/legacy_fdd';
 import 'select2';
 import './ts/select2-multi-checkboxes';
 import 'select2/dist/css/select2.css';
+import './../../app/css/input-effects.css';
 import './css/dropdown.css';
 import { capitalize } from '../../common/extensions/string-extensions';
 
@@ -447,10 +448,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);
@@ -541,10 +542,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) => {
@@ -759,6 +760,21 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 				s2Elem
 					.attr('data-vebound', 'true')
 					.on('select2:close', () => {
+						const $container = DropdownSelect2Helper.getSelect2Instance(this.getSelect2RootElement()).$dropdown;
+						$container.removeClass('pd-dropdown-open-animation pd-dropdown-open-animation-above');
+						$container[0].offsetWidth;
+
+						if ($container.hasClass('select2-container--above')) {
+							$container.addClass('pd-dropdown-close-animation-above');
+						} else {
+							$container.addClass('pd-dropdown-close-animation');
+						}
+
+						$container.one('animationend', function () {
+							$container.removeClass('pd-dropdown-close-animation pd-dropdown-close-animation-above');
+						});
+
+
 						if (self.pendingChange != null) {
 							const data = self.pendingChange?.data;
 							self.pendingChange = null;
@@ -772,6 +788,17 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 							e.stopPropagation();
 						}
 					})
+					.on('select2:open', () => {
+						const $container = DropdownSelect2Helper.getSelect2Instance(this.getSelect2RootElement()).$dropdown;
+						$container.removeClass('pd-dropdown-open-animation pd-dropdown-open-animation-above pd-dropdown-close-animation pd-dropdown-close-animation-above');
+						$container[0].offsetWidth; // reflow
+
+						if ($container.hasClass('select2-container--above')) {
+							$container.addClass('pd-dropdown-open-animation-above');
+						} else {
+							$container.addClass('pd-dropdown-open-animation');
+						}
+					})
 					.on('select2:unselect', (e) => {
 						(self as any).preventOpen = true;
 						setTimeout(() => {

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

@@ -1069,11 +1069,15 @@ import { utcEpochMilliseconds } from '../../../../common/extensions/temporal-ext
 					});
 				});
 			} else {
-				box[isModalDisplayMode() ? 'fadeIn' : 'slideDown'](animationTime, () => {
-					$(self).trigger('datepicker-opened', {
-						relatedTarget: box,
-					});
-				});
+				box.show();
+				box.removeClass('pd-dropdown-open-animation pd-dropdown-open-animation-above');
+				box[0].offsetWidth; // reflow
+
+				if (box.hasClass('select2-container--above')) {
+					box.addClass('pd-dropdown-open-animation-above');
+				} else {
+					box.addClass('pd-dropdown-open-animation');
+				}
 			}
 
 			$(self).trigger('datepicker-open', {
@@ -1932,7 +1936,9 @@ import { utcEpochMilliseconds } from '../../../../common/extensions/temporal-ext
 		}
 
 		function closeDatePicker(): void {
-			if (opt.alwaysOpen) { return; }
+			if (opt.alwaysOpen) {
+				return;
+			}
 
 			const afterAnim = function () {
 				$(self).data('date-picker-opened', false);
@@ -1943,7 +1949,14 @@ import { utcEpochMilliseconds } from '../../../../common/extensions/temporal-ext
 			if (opt.customCloseAnimation) {
 				opt.customCloseAnimation.call(box.get(0), afterAnim);
 			} else {
-				$(box)[isModalDisplayMode() ? 'fadeOut' : 'slideUp'](opt.duration, afterAnim);
+				box.removeClass('pd-dropdown-open-animation pd-dropdown-open-animation-above pd-dropdown-close-animation pd-dropdown-close-animation-above');
+				box[0].offsetWidth; // reflow
+				box.addClass('pd-dropdown-close-animation');
+
+				box.one('animationend', function () {
+					box.hide();
+					box.removeClass('pd-dropdown-open-animation pd-dropdown-open-animation-above pd-dropdown-close-animation pd-dropdown-close-animation-above');
+				});
 			}
 
 			$(self).trigger('datepicker-close', {

package/package.json

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