inviton-powerduck 0.0.77 → 0.0.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/common/enum-translation/language-translator.ts +1 -1
  2. package/common/utils/language-utils.ts +1 -1
  3. package/components/datatable/datatable-static.tsx +103 -103
  4. package/components/input/css/pin.css +32 -0
  5. package/components/input/localized-info-input.tsx +24 -27
  6. package/components/input/localized-string-input.tsx +8 -7
  7. package/components/input/localized-string-textarea.tsx +10 -10
  8. package/components/input/localized-url-input.tsx +8 -7
  9. package/components/input/pin-input.tsx +146 -0
  10. package/components/ui/notification.ts +1 -1
  11. package/package.json +1 -1
package/common/enum-translation/language-translator.ts CHANGED
@@ -3,6 +3,6 @@ import { Language } from "./../enums/language";
3
3
 
4
4
  export default class LanguageTranslator {
5
5
  static getString(lang: Language | Language) {
6
- return PowerduckState.getResourceValue('language' + lang as any);
6
+ return PowerduckState.getResourceValue('language' + lang?.toUpperCase() as any);
7
7
  }
8
8
  }
package/common/utils/language-utils.ts CHANGED
@@ -63,7 +63,7 @@ export namespace LanguageUtils {
63
63
  return newOption;
64
64
  };
65
65
 
66
- for (const langCode of [Language.sk, Language.en, Language.cs, Language, Language.pl, Language.it, Language.hu]) {
66
+ for (const langCode of [Language.sk, Language.en, Language.cs, Language, Language.pl, Language.it, Language.hu, Language.de]) {
67
67
  if (supportedLanguages.includes(langCode as any)) {
68
68
  retVal.push(getLanguage(langCode as any));
69
69
  }
package/components/datatable/datatable-static.tsx CHANGED
@@ -4,125 +4,125 @@ import DataTable, { TableColumn, RowIndexMode, DataTableFilterMode, DataTableOnS
4
4
  import { IWebApiClient, WebClientApiMethod } from "../../common/IWebClient";
5
5
 
6
6
  interface DataTableStaticArgs {
7
- id: string;
8
- cssClass?: string
9
- columns: TableColumn[];
10
- rows: any[];
11
- fullSizeTable?: boolean;
12
- fullSizeHasButtonBelow?: boolean;
13
- topVisible?: boolean;
14
- allowMassOperations?: boolean;
15
- allowExport?: boolean;
16
- hidePagination?: boolean;
17
- checkboxesVisible?: boolean;
18
- preserveOrderBy?: boolean;
19
- preserveFilter?: boolean
20
- checkboxButtonsVisible?: boolean;
21
- sortableRows?: boolean;
22
- rowCheckstateChanged?: (row: any, checked: boolean, selectedRows: any[]) => void;
23
- sortComplete?: (args: DataTableOnSortedArgs) => void;
7
+ id: string;
8
+ cssClass?: string
9
+ columns: TableColumn[];
10
+ rows: any[];
11
+ fullSizeTable?: boolean;
12
+ fullSizeHasButtonBelow?: boolean;
13
+ topVisible?: boolean;
14
+ allowMassOperations?: boolean;
15
+ allowExport?: boolean;
16
+ hidePagination?: boolean;
17
+ checkboxesVisible?: boolean;
18
+ preserveOrderBy?: boolean;
19
+ preserveFilter?: boolean
20
+ checkboxButtonsVisible?: boolean;
21
+ sortableRows?: boolean;
22
+ rowCheckstateChanged?: (row: any, checked: boolean, selectedRows: any[]) => void;
23
+ sortComplete?: (args: DataTableOnSortedArgs) => void;
24
24
  }
25
25
 
26
26
  @Component
27
27
  export class DataTableStaticComponent extends TsxComponent<DataTableStaticArgs> implements DataTableStaticArgs, IWebApiClient {
28
- @Prop() id: string;
29
- @Prop() cssClass: string
30
- @Prop() columns: TableColumn[];
31
- @Prop() rows: any[];
32
- @Prop() fullSizeTable: boolean;
33
- @Prop() fullSizeHasButtonBelow: boolean;
34
- @Prop() topVisible: boolean;
35
- @Prop() allowMassOperations: boolean;
36
- @Prop() allowExport: boolean;
37
- @Prop() checkboxesVisible!: boolean;
38
- @Prop() hidePagination!: boolean;
39
- @Prop() preserveOrderBy!: boolean;
40
- @Prop() preserveFilter!: boolean
41
- @Prop() checkboxesTitle!: string;
42
- @Prop() checkboxButtonsVisible!: boolean;
43
- @Prop() sortableRows!: boolean;
44
- @Prop() rowCheckstateChanged?: (row: any, checked: boolean, selectedRows: any[]) => void;
45
- @Prop() sortComplete?: (args: DataTableOnSortedArgs) => void;
28
+ @Prop() id: string;
29
+ @Prop() cssClass: string
30
+ @Prop() columns: TableColumn[];
31
+ @Prop() rows: any[];
32
+ @Prop() fullSizeTable: boolean;
33
+ @Prop() fullSizeHasButtonBelow: boolean;
34
+ @Prop() topVisible: boolean;
35
+ @Prop() allowMassOperations: boolean;
36
+ @Prop() allowExport: boolean;
37
+ @Prop() checkboxesVisible!: boolean;
38
+ @Prop() hidePagination!: boolean;
39
+ @Prop() preserveOrderBy!: boolean;
40
+ @Prop() preserveFilter!: boolean
41
+ @Prop() checkboxesTitle!: string;
42
+ @Prop() checkboxButtonsVisible!: boolean;
43
+ @Prop() sortableRows!: boolean;
44
+ @Prop() rowCheckstateChanged?: (row: any, checked: boolean, selectedRows: any[]) => void;
45
+ @Prop() sortComplete?: (args: DataTableOnSortedArgs) => void;
46
46
 
47
- webClient: boolean = true;
48
- apiArgs: any = {};
47
+ webClient: boolean = true;
48
+ apiArgs: any = {};
49
49
 
50
- mounted() {
51
- this.reloadData();
52
- }
50
+ mounted () {
51
+ this.reloadData();
52
+ }
53
53
 
54
- updated() {
55
- this.reloadData();
56
- }
54
+ updated () {
55
+ this.reloadData();
56
+ }
57
57
 
58
- exportExcel(): void {
59
- this.getTable().exportExcel();
60
- }
58
+ exportExcel (): void {
59
+ this.getTable().exportExcel();
60
+ }
61
61
 
62
- normalizeStringForSearch(str: string): string {
63
- return this.getTable().normalizeStringForSearch(str);
64
- }
62
+ normalizeStringForSearch (str: string): string {
63
+ return this.getTable().normalizeStringForSearch(str);
64
+ }
65
65
 
66
- private post(data: any): Promise<any> {
67
- let self = this;
68
- return new Promise(function (resolve, reject) {
69
- let rowArr = [...(self.rows || [])];
66
+ private post (data: any): Promise<any> {
67
+ let self = this;
68
+ return new Promise(function (resolve, reject) {
69
+ let rowArr = [...(self.rows || [])];
70
70
 
71
- resolve({
72
- TotalCount: rowArr.length,
73
- TotalFilteredCount: rowArr.length,
74
- Rows: rowArr,
75
- InitRows: self.rows
76
- });
77
- });
78
- }
71
+ resolve({
72
+ TotalCount: rowArr.length,
73
+ TotalFilteredCount: rowArr.length,
74
+ Rows: rowArr,
75
+ InitRows: self.rows
76
+ });
77
+ });
78
+ }
79
79
 
80
- private getTable(): typeof DataTable.prototype {
81
- return this.$refs.innerTable as typeof DataTable.prototype;
82
- }
80
+ private getTable (): typeof DataTable.prototype {
81
+ return this.$refs.innerTable as typeof DataTable.prototype;
82
+ }
83
83
 
84
- reloadData(): void {
85
- this.getTable().reloadData();
86
- }
84
+ reloadData (): void {
85
+ this.getTable().reloadData();
86
+ }
87
87
 
88
- getSelectedRows(): any[] {
89
- return this.getTable().getSelectedRows();
90
- }
88
+ getSelectedRows (): any[] {
89
+ return this.getTable().getSelectedRows();
90
+ }
91
91
 
92
- getCssClass(): string {
93
- return `dt-static${this.cssClass ? ' ' + this.cssClass : ''}`;
94
- }
92
+ getCssClass (): string {
93
+ return `dt-static${this.cssClass ? ' ' + this.cssClass : ''}`;
94
+ }
95
95
 
96
- render(h) {
97
- return (
98
- <DataTable
99
- id={this.id}
100
- ref={"innerTable"}
101
- apiClient={this}
102
- apiArgs={this.apiArgs}
103
- rowIndexMode={RowIndexMode.Index}
104
- apiMethod={WebClientApiMethod.Post}
105
- filterMode={DataTableFilterMode.Clientside}
106
- checkboxButtonsVisible={this.checkboxButtonsVisible}
107
- preserveFilter={this.preserveFilter}
108
- checkboxesVisible={this.checkboxesVisible}
109
- rowCheckstateChanged={this.rowCheckstateChanged}
110
- columns={this.columns}
111
- cssClass={this.getCssClass()}
112
- topVisible={this.topVisible == true}
113
- bottomVisible={false}
114
- hidePagination={this.hidePagination}
115
- allowMassOperations={this.allowMassOperations}
116
- allowExport={this.allowExport}
117
- fullSizeTable={this.fullSizeTable}
118
- sortableRows={this.sortableRows}
119
- sortComplete={this.sortComplete}
120
- preserveOrderBy={this.preserveOrderBy}
121
- fullSizeHasButtonBelow={this.fullSizeTable}
122
- />
123
- );
124
- }
96
+ render (h) {
97
+ return (
98
+ <DataTable
99
+ id={this.id}
100
+ ref={"innerTable"}
101
+ apiClient={this}
102
+ apiArgs={this.apiArgs}
103
+ rowIndexMode={RowIndexMode.Index}
104
+ apiMethod={WebClientApiMethod.Post}
105
+ filterMode={DataTableFilterMode.Clientside}
106
+ checkboxButtonsVisible={this.checkboxButtonsVisible}
107
+ preserveFilter={this.preserveFilter}
108
+ checkboxesVisible={this.checkboxesVisible}
109
+ rowCheckstateChanged={this.rowCheckstateChanged}
110
+ columns={this.columns}
111
+ cssClass={this.getCssClass()}
112
+ topVisible={this.topVisible == true}
113
+ bottomVisible={false}
114
+ hidePagination={this.hidePagination}
115
+ allowMassOperations={this.allowMassOperations}
116
+ allowExport={this.allowExport}
117
+ fullSizeTable={this.fullSizeTable}
118
+ sortableRows={this.sortableRows}
119
+ sortComplete={this.sortComplete}
120
+ preserveOrderBy={this.preserveOrderBy}
121
+ fullSizeHasButtonBelow={this.fullSizeTable}
122
+ />
123
+ );
124
+ }
125
125
  }
126
126
 
127
127
  const DataTableStatic = toNative(DataTableStaticComponent)
128
- export default DataTableStatic
128
+ export default DataTableStatic
package/components/input/css/pin.css ADDED
@@ -0,0 +1,32 @@
1
+ .pin {
2
+ display: flex;
3
+ flex-direction: row;
4
+ justify-content: space-between;
5
+ align-items: stretch;
6
+ flex-wrap: wrap;
7
+ width: 100%;
8
+ border: none;
9
+ /* gap: auto; */
10
+ }
11
+
12
+ .pin .pin-input,
13
+ .pin .formwrap-nomargin,
14
+ .pin .pin-input .form-control {
15
+ width: 46px;
16
+ height: 50px;
17
+ border-radius: 10px;
18
+ text-align: center;
19
+ }
20
+
21
+ .pin .pin-input,
22
+ .pin .pin-input .form-control {
23
+ background-color: #F2F4FF;
24
+ }
25
+
26
+ .pin .pin-input .form-control {
27
+ border: none;
28
+ }
29
+
30
+ .pin .pin-input .form-control:focus {
31
+ box-shadow: none;
32
+ }
package/components/input/localized-info-input.tsx CHANGED
@@ -1,7 +1,6 @@
1
- import { Prop, toNative, Watch } from "vue-facing-decorator";
1
+ import { Prop, toNative } from "vue-facing-decorator";
2
2
  import LocalizedText from "../../common/localized-text";
3
3
  import TsxComponent, { Component } from "../../app/vuetsx";
4
- import { ILocalizedString } from "../../common/utils/localized-string";
5
4
  import { Language } from "../../common/enums/language";
6
5
  import { isNullOrEmpty } from "../../common/utils/is-null-or-empty";
7
6
  import LocalizedStringTextarea from "./localized-string-textarea";
@@ -39,33 +38,31 @@ class LocalizedInfoInputComponent extends TsxComponent<LocalizedInfoInputArgs> i
39
38
  return this.value[lang];
40
39
  }
41
40
 
42
- getValue(value: LocalizedText): ILocalizedString {
41
+ getValue(value: LocalizedText): LocalizedText {
43
42
  if (value == null) {
44
43
  return {
45
- Czech: null,
46
- English: null,
47
- German: null,
48
- Italian: null,
49
- Latvian: null,
50
- Polish: null,
51
- Slovak: null,
52
- Hungarian: null,
44
+ cs: null,
45
+ en: null,
46
+ de: null,
47
+ it: null,
48
+ pl: null,
49
+ sk: null,
50
+ hu: null,
53
51
  };
54
52
  }
55
53
 
56
54
  return {
57
- Czech: this.getValueForTmrLanguage(Language.cs),
58
- English: this.getValueForTmrLanguage(Language.en),
59
- German: this.getValueForTmrLanguage(Language.de),
60
- Italian: this.getValueForTmrLanguage(Language.it),
61
- Latvian: null,
62
- Polish: this.getValueForTmrLanguage(Language.pl),
63
- Slovak: this.getValueForTmrLanguage(Language.sk),
64
- Hungarian: this.getValueForTmrLanguage(Language.hu),
55
+ cs: this.getValueForTmrLanguage(Language.cs),
56
+ en: this.getValueForTmrLanguage(Language.en),
57
+ de: this.getValueForTmrLanguage(Language.de),
58
+ it: this.getValueForTmrLanguage(Language.it),
59
+ pl: this.getValueForTmrLanguage(Language.pl),
60
+ sk: this.getValueForTmrLanguage(Language.sk),
61
+ hu: this.getValueForTmrLanguage(Language.hu),
65
62
  };
66
63
  }
67
64
 
68
- valueChanged(e: ILocalizedString) {
65
+ valueChanged(e: LocalizedText): void {
69
66
  if (e == null) {
70
67
  this.changed(null);
71
68
  return;
@@ -78,13 +75,13 @@ class LocalizedInfoInputComponent extends TsxComponent<LocalizedInfoInputArgs> i
78
75
  }
79
76
  };
80
77
 
81
- addLocalizedValue(Language.sk, e.Slovak);
82
- addLocalizedValue(Language.cs, e.Czech);
83
- addLocalizedValue(Language.en, e.English);
84
- addLocalizedValue(Language.de, e.German);
85
- addLocalizedValue(Language.pl, e.Polish);
86
- addLocalizedValue(Language.it, e.Italian);
87
- addLocalizedValue(Language.hu, e.Hungarian);
78
+ addLocalizedValue(Language.sk, e.sk);
79
+ addLocalizedValue(Language.cs, e.cs);
80
+ addLocalizedValue(Language.en, e.en);
81
+ addLocalizedValue(Language.de, e.de);
82
+ addLocalizedValue(Language.pl, e.pl);
83
+ addLocalizedValue(Language.it, e.it);
84
+ addLocalizedValue(Language.hu, e.hu);
88
85
  this.changed(retObj);
89
86
  }
90
87
 
package/components/input/localized-string-input.tsx CHANGED
@@ -9,16 +9,17 @@ import { ButtonLayout } from "../button/button-layout";
9
9
  import { DropdownButtonItemArgs } from "../dropdown-button/dropdown-button-item";
10
10
  import { PortalUtils } from "../../common/utils/utils";
11
11
  import { LanguageUtils } from "../../common/utils/language-utils";
12
- import LocalizedStringHelper, { ILocalizedString } from "../../common/utils/localized-string";
12
+ import LocalizedStringHelper from "../../common/utils/localized-string";
13
13
  import { Language } from "../../common/enums/language";
14
14
  import { isNullOrEmpty } from "../../common/utils/is-null-or-empty";
15
15
  import globalIcon from './img/global.png';
16
16
  import PowerduckState from "../../app/powerduck-state";
17
+ import LocalizedText from "../../common/localized-text";
17
18
  import "./css/localized-string-input.css";
18
19
 
19
20
  interface LocalizedStringInputArgs extends FormItemWrapperArgs {
20
- value: ILocalizedString;
21
- changed: (e: ILocalizedString) => void;
21
+ value: LocalizedText;
22
+ changed: (e: LocalizedText) => void;
22
23
  supportedLanguages?: Language[];
23
24
  placeholder?: string;
24
25
  }
@@ -28,8 +29,8 @@ class LocalizedStringInputComponent extends TsxComponent<LocalizedStringInputArg
28
29
  @Prop() label!: string;
29
30
  @Prop() labelButtons!: DropdownButtonItemArgs[];
30
31
  @Prop() subtitle!: string;
31
- @Prop() value!: ILocalizedString;
32
- @Prop() changed: (e: ILocalizedString) => void;
32
+ @Prop() value!: LocalizedText;
33
+ @Prop() changed: (e: LocalizedText) => void;
33
34
  @Prop() supportedLanguages?: Language[];
34
35
  @Prop() marginType?: MarginType;
35
36
  @Prop() maxWidth?: number;
@@ -44,11 +45,11 @@ class LocalizedStringInputComponent extends TsxComponent<LocalizedStringInputArg
44
45
  @Prop() prependIcon: string;
45
46
  @Prop() appendClicked: () => void;
46
47
  @Prop() prependClicked: () => void;
47
- currentValue: ILocalizedString = null;
48
+ currentValue: LocalizedText = null;
48
49
  modalWillShow: boolean = false;
49
50
  uuid: string = "lsw-" + PortalUtils.randomString(10);
50
51
 
51
- raiseChangeEvent(newValue: ILocalizedString): void {
52
+ raiseChangeEvent(newValue: LocalizedText): void {
52
53
  this.populateValidationDeclaration();
53
54
 
54
55
  if (this.changed != null) {
package/components/input/localized-string-textarea.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Prop, toNative, Watch } from "vue-facing-decorator";
1
+ import { Prop, toNative } from "vue-facing-decorator";
2
2
  import TsxComponent, { Component } from "../../app/vuetsx";
3
3
  import FormItemWrapper, { FormItemWrapperArgs, HintType, MarginType } from "../form/form-item-wrapper";
4
4
  import Tabs, { TabsRenderMode } from "../tabs/tabs";
@@ -6,13 +6,13 @@ import { TabPage } from "../tabs/tab-page";
6
6
  import { DropdownButtonItemArgs } from "../dropdown-button/dropdown-button-item";
7
7
  import TextArea from "./textarea";
8
8
  import { LanguageUtils } from "../../common/utils/language-utils";
9
- import { ILocalizedString } from "../../common/utils/localized-string";
10
9
  import { Language } from "../../common/enums/language";
11
10
  import PowerduckState from "../../app/powerduck-state";
11
+ import LocalizedText from "../../common/localized-text";
12
12
 
13
13
  interface LocalizedStringInputArgs extends FormItemWrapperArgs {
14
- value: ILocalizedString;
15
- changed: (e: ILocalizedString) => void;
14
+ value: LocalizedText;
15
+ changed: (e: LocalizedText) => void;
16
16
  supportedLanguages?: Language[];
17
17
  placeholder?: string;
18
18
  }
@@ -22,8 +22,8 @@ class LocalizedStringTextareaComponent extends TsxComponent<LocalizedStringInput
22
22
  @Prop() label!: string;
23
23
  @Prop() labelButtons!: DropdownButtonItemArgs[];
24
24
  @Prop() subtitle!: string;
25
- @Prop() value!: ILocalizedString;
26
- @Prop() changed: (e: ILocalizedString) => void;
25
+ @Prop() value!: LocalizedText;
26
+ @Prop() changed: (e: LocalizedText) => void;
27
27
  @Prop() supportedLanguages?: Language[];
28
28
  @Prop() marginType?: MarginType;
29
29
  @Prop() maxWidth?: number;
@@ -37,9 +37,9 @@ class LocalizedStringTextareaComponent extends TsxComponent<LocalizedStringInput
37
37
  @Prop() prependIcon: string;
38
38
  @Prop() appendClicked: () => void;
39
39
  @Prop() prependClicked: () => void;
40
- currentValue: ILocalizedString = null;
40
+ currentValue: LocalizedText = null;
41
41
 
42
- raiseChangeEvent(newValue: ILocalizedString): void {
42
+ raiseChangeEvent (newValue: LocalizedText): void {
43
43
  this.populateValidationDeclaration();
44
44
 
45
45
  if (this.changed != null) {
@@ -52,12 +52,12 @@ class LocalizedStringTextareaComponent extends TsxComponent<LocalizedStringInput
52
52
  }
53
53
 
54
54
  changeValue(lang: Language, newValue: string): void {
55
- let value = this.value || ({} as ILocalizedString);
55
+ let value = this.value || ({} as LocalizedText);
56
56
  value[lang] = newValue;
57
57
  this.raiseChangeEvent(value);
58
58
  }
59
59
 
60
- getActualValue(lang: Language, value: ILocalizedString): string {
60
+ getActualValue (lang: Language, value: LocalizedText): string {
61
61
  if (value == null) {
62
62
  return null;
63
63
  }
package/components/input/localized-url-input.tsx CHANGED
@@ -13,15 +13,16 @@ import FlexFormItem from "../form/form-item-flex";
13
13
  import { FileManagerDialog, FileManagerModalFileType } from "../modal/ts/file-manager-dialog";
14
14
  import { PortalUtils } from "../../common/utils/utils";
15
15
  import { LanguageUtils } from "../../common/utils/language-utils";
16
- import LocalizedStringHelper, { ILocalizedString } from "../../common/utils/localized-string";
16
+ import LocalizedStringHelper from "../../common/utils/localized-string";
17
17
  import { Language } from "../../common/enums/language";
18
18
  import { isNullOrEmpty } from "../../common/utils/is-null-or-empty";
19
19
  import globalIcon from './img/global.png';
20
20
  import PowerduckState from "../../app/powerduck-state";
21
+ import LocalizedText from "../../common/localized-text";
21
22
 
22
23
  interface LocalizedUrlInputArgs extends FormItemWrapperArgs {
23
- value: ILocalizedString;
24
- changed: (e: ILocalizedString) => void;
24
+ value: LocalizedText;
25
+ changed: (e: LocalizedText) => void;
25
26
  supportedLanguages?: Language[];
26
27
  placeholder?: string;
27
28
  }
@@ -31,8 +32,8 @@ class LocalizedUrlInputComponent extends TsxComponent<LocalizedUrlInputArgs> imp
31
32
  @Prop() label!: string;
32
33
  @Prop() labelButtons!: DropdownButtonItemArgs[];
33
34
  @Prop() subtitle!: string;
34
- @Prop() value!: ILocalizedString;
35
- @Prop() changed: (e: ILocalizedString) => void;
35
+ @Prop() value!: LocalizedText;
36
+ @Prop() changed: (e: LocalizedText) => void;
36
37
  @Prop() supportedLanguages?: Language[];
37
38
  @Prop() marginType?: MarginType;
38
39
  @Prop() maxWidth?: number;
@@ -46,12 +47,12 @@ class LocalizedUrlInputComponent extends TsxComponent<LocalizedUrlInputArgs> imp
46
47
  @Prop() prependIcon: string;
47
48
  @Prop() appendClicked: () => void;
48
49
  @Prop() prependClicked: () => void;
49
- currentValue: ILocalizedString = null;
50
+ currentValue: LocalizedText = null;
50
51
  modalWillShow: boolean = false;
51
52
  isModal: boolean = false;
52
53
  uuid: string = "lsw-" + PortalUtils.randomString(10);
53
54
 
54
- raiseChangeEvent(newValue: ILocalizedString): void {
55
+ raiseChangeEvent (newValue: LocalizedText): void {
55
56
  this.populateValidationDeclaration();
56
57
 
57
58
  if (this.changed != null) {
package/components/input/pin-input.tsx ADDED
@@ -0,0 +1,146 @@
1
+ import TsxComponent, { Component } from "../../app/vuetsx";
2
+ import { Prop, toNative } from "vue-facing-decorator";
3
+ import { isNullOrEmpty } from "../../common/utils/is-null-or-empty";
4
+ import TextBox, { TextBoxTextType } from "./textbox";
5
+ import "./css/pin.css";
6
+
7
+ export enum PinInputType {
8
+ Alpha = "alpha",
9
+ Numeric = "numeric",
10
+ AlphaNumeric = "alphanumeric",
11
+ }
12
+
13
+ interface PinInputArgs {
14
+ length: number;
15
+ cssClass?: string;
16
+ inputType?: PinInputType;
17
+ value: string[];
18
+ changed: (value: string[]) => void;
19
+ }
20
+
21
+ @Component
22
+ class PinInputComponent extends TsxComponent<PinInputArgs> implements PinInputArgs {
23
+ @Prop() length: number;
24
+ @Prop() cssClass!: string;
25
+ @Prop() inputType: PinInputType;
26
+ @Prop() value: string[];
27
+ @Prop() changed: (value: string[]) => void;
28
+ currentValue: string[] = null
29
+
30
+ mounted (): void {
31
+ this.currentValue = Array(this.length).fill("");
32
+ }
33
+
34
+ getCssClass (): string {
35
+ return `pin ${this.cssClass || ""}`;
36
+ }
37
+
38
+ getInputType (): PinInputType {
39
+ return this.inputType ?? PinInputType.Numeric;
40
+ }
41
+
42
+ get isFullyFilled (): boolean {
43
+ return this.currentValue?.every((p) => !isNullOrEmpty(p));
44
+ }
45
+
46
+ isValidInput (value: string): boolean {
47
+ const type = this.getInputType();
48
+ switch (type) {
49
+ case PinInputType.Alpha:
50
+ return /^[a-zA-Z]$/.test(value);
51
+ case PinInputType.Numeric:
52
+ return /^[0-9]$/.test(value);
53
+ case PinInputType.AlphaNumeric:
54
+ return /^[a-zA-Z0-9]$/.test(value);
55
+ default:
56
+ return false;
57
+ }
58
+ }
59
+
60
+ focusNext (index: number): void {
61
+ if (index < this.length - 1) {
62
+ const nextInput = this.getElement(index + 1);
63
+ $(nextInput.$el).find("input")?.focus();
64
+ }
65
+ }
66
+
67
+ focusPrev (index: number): void {
68
+ if (index > 0) {
69
+ const prevInput = this.getElement(index - 1);
70
+ $(prevInput.$el).find("input")?.focus();
71
+ }
72
+ }
73
+
74
+ updatePin (value: string, index: number): void {
75
+ if (!this.isValidInput(value)) {
76
+ return;
77
+ }
78
+
79
+ this.currentValue[index] = value.slice(-1);
80
+
81
+ if (this.isFullyFilled) {
82
+ this.blurAllInputs();
83
+ } else {
84
+ this.focusNext(index);
85
+ }
86
+
87
+ this.changed(this.currentValue);
88
+ }
89
+
90
+ blurAllInputs (): void {
91
+ for (let index = 0; index < this.currentValue?.length; index++) {
92
+ const input = this.getElement(index);
93
+ $(input.$el).find("input")?.blur();
94
+ }
95
+ }
96
+
97
+ getElement (index: number) {
98
+ if (index < 0 || index >= this.length) {
99
+ return null;
100
+ }
101
+
102
+ return this.$refs[`pin-${index}`] as typeof TextBox.prototype;
103
+ }
104
+
105
+ render (h) {
106
+ if (!this.currentValue) {
107
+ return null;
108
+ }
109
+
110
+ return (
111
+ <div class={this.getCssClass()}>
112
+ {Array.from({ length: this.length }, (_, index) => (
113
+ <TextBox
114
+ label=""
115
+ key={index}
116
+ wrap={false}
117
+ ref={`pin-${index}`}
118
+ nameAttr={`pin-${index}`}
119
+ maxLength={1}
120
+ cssClass="pin-input"
121
+ updateMode="input"
122
+ autoCompleteEnabled={false}
123
+ textType={TextBoxTextType.Password}
124
+ value={this.currentValue[index]}
125
+ keyDown={(e) => {
126
+ if (e.key == "Backspace") {
127
+ this.currentValue[index] = "";
128
+ this.focusPrev(index);
129
+ this.changed(this.currentValue);
130
+ }
131
+
132
+ if (!this.isValidInput(e.key)) {
133
+ e.preventDefault();
134
+ e.stopPropagation();
135
+ }
136
+ }}
137
+ changed={(e) => { this.updatePin(e, index); }}
138
+ />
139
+ ))}
140
+ </div>
141
+ );
142
+ }
143
+ }
144
+
145
+ const PinInput = toNative(PinInputComponent);
146
+ export default PinInput;
package/components/ui/notification.ts CHANGED
@@ -168,7 +168,7 @@ var NotificationUtils = (function () {
168
168
  {
169
169
  type: args.type || "primary",
170
170
  timer: args.timeout > -1 ? args.timeout : NotificationProviderConfig.defaultTimeout,
171
- delay: args.delay > -1 ? args.delay : NotificationProviderConfig.defaultTimeout,
171
+ delay: args.delay > -1 ? args.delay : NotificationProviderConfig.defaultDelay,
172
172
  placement: getPlacement(args),
173
173
  z_index: 99999,
174
174
  newest_on_top: (args.newestTop || false),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "inviton-powerduck",
3
- "version": "0.0.77",
3
+ "version": "0.0.78",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "build": " vite build && vue-tsc --declaration --emitDeclarationOnly",