@naptics/vue-collection 0.2.15 → 0.3.1
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.
- package/.github/workflows/build.yml +26 -0
- package/.github/workflows/deploy-demo.yml +46 -0
- package/.github/workflows/deploy-lib.yml +59 -0
- package/.gitlab-ci.yml +57 -0
- package/.nvmrc +1 -0
- package/.prettierrc +8 -0
- package/.vscode/extensions.json +10 -0
- package/.vscode/launch.json +23 -0
- package/.vscode/settings.json +13 -0
- package/babel.config.json +3 -0
- package/components/NAlert.d.ts +1 -44
- package/components/NBadge.d.ts +1 -133
- package/components/NBreadcrub.d.ts +2 -106
- package/components/NBreadcrub.js +1 -1
- package/components/NButton.d.ts +2 -118
- package/components/NCheckbox.d.ts +1 -32
- package/components/NCheckboxLabel.d.ts +1 -45
- package/components/NCheckboxLabel.js +1 -1
- package/components/NCrudModal.d.ts +7 -251
- package/components/NCrudModal.js +1 -1
- package/components/NDialog.d.ts +1 -110
- package/components/NDialog.js +1 -1
- package/components/NDropdown.d.ts +1 -69
- package/components/NDropdown.js +1 -1
- package/components/NDropzone.d.ts +1 -115
- package/components/NDropzone.js +1 -1
- package/components/NForm.d.ts +1 -23
- package/components/NFormModal.d.ts +7 -151
- package/components/NIconButton.d.ts +3 -159
- package/components/NIconButton.js +1 -1
- package/components/NIconCircle.d.ts +1 -87
- package/components/NInput.d.ts +1 -164
- package/components/NInput.js +1 -1
- package/components/NInputPhone.d.ts +2 -114
- package/components/NInputPhone.js +1 -1
- package/components/NInputSelect.d.ts +2 -187
- package/components/NInputSelect.js +1 -1
- package/components/NInputSuggestion.d.ts +2 -155
- package/components/NInputSuggestion.js +1 -1
- package/components/NLink.d.ts +6 -70
- package/components/NLink.js +8 -1
- package/components/NList.d.ts +1 -43
- package/components/NList.js +1 -1
- package/components/NLoadingIndicator.d.ts +1 -49
- package/components/NModal.d.ts +12 -250
- package/components/NModal.js +15 -9
- package/components/NPagination.d.ts +1 -63
- package/components/NSearchbar.d.ts +1 -56
- package/components/NSearchbarList.d.ts +3 -63
- package/components/NSearchbarList.js +1 -1
- package/components/NSelect.d.ts +2 -148
- package/components/NSelect.js +1 -1
- package/components/NSuggestionList.d.ts +3 -126
- package/components/NSuggestionList.js +5 -2
- package/components/NTable.d.ts +1 -85
- package/components/NTable.js +12 -6
- package/components/NTableAction.d.ts +2 -46
- package/components/NTableAction.js +1 -1
- package/components/NTextArea.d.ts +2 -181
- package/components/NTextArea.js +1 -1
- package/components/NTooltip.d.ts +1 -105
- package/components/NTooltip.js +1 -1
- package/components/NValInput.d.ts +7 -182
- package/components/NValInput.js +1 -1
- package/env.d.ts +15 -0
- package/eslint.config.cjs +29 -0
- package/index.html +13 -0
- package/package.json +21 -19
- package/postcss.config.js +6 -0
- package/public/favicon.ico +0 -0
- package/scripts/build-lib.sh +52 -0
- package/scripts/sync-node-types.js +70 -0
- package/src/demo/App.css +9 -0
- package/src/demo/App.tsx +5 -0
- package/src/demo/components/ColorGrid.tsx +26 -0
- package/src/demo/components/ComponentGrid.tsx +26 -0
- package/src/demo/components/ComponentSection.tsx +30 -0
- package/src/demo/components/VariantSection.tsx +18 -0
- package/src/demo/i18n/de.ts +7 -0
- package/src/demo/i18n/en.ts +7 -0
- package/src/demo/i18n/index.ts +24 -0
- package/src/demo/main.ts +13 -0
- package/src/demo/router/index.ts +21 -0
- package/src/demo/views/HomeView.tsx +94 -0
- package/src/demo/views/NavigationView.tsx +43 -0
- package/src/demo/views/presentation/AlertView.tsx +40 -0
- package/src/demo/views/presentation/BadgeView.tsx +61 -0
- package/src/demo/views/presentation/BreadcrumbView.tsx +52 -0
- package/src/demo/views/presentation/ButtonView.tsx +49 -0
- package/src/demo/views/presentation/CheckboxView.tsx +59 -0
- package/src/demo/views/presentation/DropdownView.tsx +59 -0
- package/src/demo/views/presentation/DropzoneView.tsx +39 -0
- package/src/demo/views/presentation/IconButtonView.tsx +47 -0
- package/src/demo/views/presentation/IconCircleView.tsx +38 -0
- package/src/demo/views/presentation/InputView.tsx +179 -0
- package/src/demo/views/presentation/LinkView.tsx +60 -0
- package/src/demo/views/presentation/ListView.tsx +29 -0
- package/src/demo/views/presentation/LoadingIndicatorView.tsx +38 -0
- package/src/demo/views/presentation/ModalView.tsx +210 -0
- package/src/demo/views/presentation/PaginationView.tsx +25 -0
- package/src/demo/views/presentation/SearchbarView.tsx +80 -0
- package/src/demo/views/presentation/TableView.tsx +146 -0
- package/src/demo/views/presentation/TooltipView.tsx +86 -0
- package/src/lib/components/NAlert.tsx +85 -0
- package/src/lib/components/NBadge.tsx +75 -0
- package/src/lib/components/NBreadcrub.tsx +97 -0
- package/src/lib/components/NButton.tsx +80 -0
- package/src/lib/components/NCheckbox.tsx +55 -0
- package/src/lib/components/NCheckboxLabel.tsx +51 -0
- package/src/lib/components/NCrudModal.tsx +133 -0
- package/src/lib/components/NDialog.tsx +182 -0
- package/src/lib/components/NDropdown.tsx +167 -0
- package/src/lib/components/NDropzone.tsx +265 -0
- package/src/lib/components/NForm.tsx +32 -0
- package/src/lib/components/NFormModal.tsx +66 -0
- package/src/lib/components/NIconButton.tsx +92 -0
- package/src/lib/components/NIconCircle.tsx +78 -0
- package/src/lib/components/NInput.css +11 -0
- package/src/lib/components/NInput.tsx +139 -0
- package/src/lib/components/NInputPhone.tsx +53 -0
- package/src/lib/components/NInputSelect.tsx +126 -0
- package/src/lib/components/NInputSuggestion.tsx +80 -0
- package/src/lib/components/NLink.tsx +82 -0
- package/src/lib/components/NList.tsx +67 -0
- package/src/lib/components/NLoadingIndicator.css +46 -0
- package/src/lib/components/NLoadingIndicator.tsx +63 -0
- package/src/lib/components/NModal.tsx +243 -0
- package/src/lib/components/NPagination.css +15 -0
- package/src/lib/components/NPagination.tsx +131 -0
- package/src/lib/components/NSearchbar.tsx +78 -0
- package/src/lib/components/NSearchbarList.tsx +47 -0
- package/src/lib/components/NSelect.tsx +128 -0
- package/src/lib/components/NSuggestionList.tsx +216 -0
- package/src/lib/components/NTable.css +3 -0
- package/src/lib/components/NTable.tsx +247 -0
- package/src/lib/components/NTableAction.tsx +49 -0
- package/src/lib/components/NTextArea.tsx +159 -0
- package/src/lib/components/NTooltip.css +37 -0
- package/src/lib/components/NTooltip.tsx +250 -0
- package/src/lib/components/NValInput.tsx +163 -0
- package/src/lib/components/ValidatedForm.ts +71 -0
- package/src/lib/components/__tests__/NButton.spec.tsx +26 -0
- package/src/lib/components/__tests__/NCheckbox.spec.tsx +39 -0
- package/src/lib/i18n/de/vue-collection.json +58 -0
- package/src/lib/i18n/en/vue-collection.json +58 -0
- package/src/lib/i18n/index.ts +54 -0
- package/src/lib/index.ts +2 -0
- package/src/lib/jsx.d.ts +13 -0
- package/src/lib/utils/__tests__/identifiable.spec.ts +72 -0
- package/src/lib/utils/__tests__/validation.spec.ts +92 -0
- package/src/lib/utils/breakpoints.ts +47 -0
- package/src/lib/utils/component.tsx +131 -0
- package/src/lib/utils/deferred.ts +28 -0
- package/src/lib/utils/identifiable.ts +87 -0
- package/src/lib/utils/stringMaxLength.ts +25 -0
- package/src/lib/utils/tailwind.ts +41 -0
- package/src/lib/utils/utils.ts +90 -0
- package/src/lib/utils/vModel.ts +260 -0
- package/src/lib/utils/validation.ts +189 -0
- package/src/lib/utils/vue.ts +25 -0
- package/tailwind.config.js +38 -0
- package/tsconfig.config.json +9 -0
- package/tsconfig.demo.json +19 -0
- package/tsconfig.json +16 -0
- package/tsconfig.lib.json +18 -0
- package/tsconfig.vitest.json +8 -0
- package/utils/breakpoints.d.ts +1 -1
- package/utils/component.d.ts +3 -7
- package/utils/component.js +5 -2
- package/utils/identifiable.js +5 -1
- package/vite.config.ts +28 -0
|
@@ -63,73 +63,5 @@ export type DropdownItem = {
|
|
|
63
63
|
* The `NDropdown` consists of a button and a panel with multiple actions.
|
|
64
64
|
* It is useful to group multiple actions together in one place.
|
|
65
65
|
*/
|
|
66
|
-
declare const Component: import("vue").
|
|
67
|
-
/**
|
|
68
|
-
* The title of the dropdown-button.
|
|
69
|
-
*/
|
|
70
|
-
readonly title: StringConstructor;
|
|
71
|
-
/**
|
|
72
|
-
* The items of the dropdown.
|
|
73
|
-
* The second dimension of the array is used
|
|
74
|
-
* to create groups of items, which are visually seperated.
|
|
75
|
-
*/
|
|
76
|
-
readonly items: {
|
|
77
|
-
readonly type: PropType<DropdownItem[] | DropdownItem[][]>;
|
|
78
|
-
readonly default: () => never[];
|
|
79
|
-
};
|
|
80
|
-
/**
|
|
81
|
-
* If set to `true` the panel is right-aligned to the button.
|
|
82
|
-
*/
|
|
83
|
-
readonly right: BooleanConstructor;
|
|
84
|
-
/**
|
|
85
|
-
* If set to `true` the dropdown-button is disabled and no interaction is possible.
|
|
86
|
-
*/
|
|
87
|
-
readonly disabled: BooleanConstructor;
|
|
88
|
-
/**
|
|
89
|
-
* Adds the classes to the Button of the dropdown.
|
|
90
|
-
*/
|
|
91
|
-
readonly buttonClass: StringConstructor;
|
|
92
|
-
/**
|
|
93
|
-
* A slot to replace the button of the dropdown.
|
|
94
|
-
* The passed parameter is the HeadlessUI `MenuButton` which should be
|
|
95
|
-
* used to create the button for the Dropdown to work properly.
|
|
96
|
-
*/
|
|
97
|
-
readonly button: PropType<(button: typeof MenuButton) => JSX.Element>;
|
|
98
|
-
}, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
99
|
-
/**
|
|
100
|
-
* The title of the dropdown-button.
|
|
101
|
-
*/
|
|
102
|
-
readonly title: StringConstructor;
|
|
103
|
-
/**
|
|
104
|
-
* The items of the dropdown.
|
|
105
|
-
* The second dimension of the array is used
|
|
106
|
-
* to create groups of items, which are visually seperated.
|
|
107
|
-
*/
|
|
108
|
-
readonly items: {
|
|
109
|
-
readonly type: PropType<DropdownItem[] | DropdownItem[][]>;
|
|
110
|
-
readonly default: () => never[];
|
|
111
|
-
};
|
|
112
|
-
/**
|
|
113
|
-
* If set to `true` the panel is right-aligned to the button.
|
|
114
|
-
*/
|
|
115
|
-
readonly right: BooleanConstructor;
|
|
116
|
-
/**
|
|
117
|
-
* If set to `true` the dropdown-button is disabled and no interaction is possible.
|
|
118
|
-
*/
|
|
119
|
-
readonly disabled: BooleanConstructor;
|
|
120
|
-
/**
|
|
121
|
-
* Adds the classes to the Button of the dropdown.
|
|
122
|
-
*/
|
|
123
|
-
readonly buttonClass: StringConstructor;
|
|
124
|
-
/**
|
|
125
|
-
* A slot to replace the button of the dropdown.
|
|
126
|
-
* The passed parameter is the HeadlessUI `MenuButton` which should be
|
|
127
|
-
* used to create the button for the Dropdown to work properly.
|
|
128
|
-
*/
|
|
129
|
-
readonly button: PropType<(button: typeof MenuButton) => JSX.Element>;
|
|
130
|
-
}>> & {}, {
|
|
131
|
-
readonly right: boolean;
|
|
132
|
-
readonly disabled: boolean;
|
|
133
|
-
readonly items: DropdownItem[] | DropdownItem[][];
|
|
134
|
-
}>;
|
|
66
|
+
declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
|
|
135
67
|
export { Component as NDropdown, Component as default };
|
package/components/NDropdown.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { createVNode as _createVNode, isVNode as _isVNode } from "vue";
|
|
2
2
|
import { createComponentWithSlots } from '../utils/component';
|
|
3
3
|
import { computed, Transition } from 'vue';
|
|
4
4
|
import { RouterLink } from 'vue-router';
|
|
@@ -57,119 +57,5 @@ export declare const nDropzoneProps: {
|
|
|
57
57
|
* The `NDropzone` is an area where files can be added by the user by drag & drop.
|
|
58
58
|
* Files can also be selected with a file chooser by clicking on the dropzone.
|
|
59
59
|
*/
|
|
60
|
-
declare const Component: import("vue").
|
|
61
|
-
/**
|
|
62
|
-
* A description which files are allowed for this dropzone.
|
|
63
|
-
* This should include everything the user needs to know about
|
|
64
|
-
* the file type / the extensions and the maximum size of the file.
|
|
65
|
-
* @see {@link nDropzoneProps.accept}
|
|
66
|
-
* @see {@link nDropzoneProps.maxFileSize}
|
|
67
|
-
*/
|
|
68
|
-
readonly description: StringConstructor;
|
|
69
|
-
/**
|
|
70
|
-
* The maximum amount of files which can be added to the dropzone.
|
|
71
|
-
*/
|
|
72
|
-
readonly maxFiles: {
|
|
73
|
-
readonly type: NumberConstructor;
|
|
74
|
-
readonly default: 1;
|
|
75
|
-
};
|
|
76
|
-
/**
|
|
77
|
-
* Specifies which file types are accepted. The same syntax as with inputs of type file is used.
|
|
78
|
-
* Make sure to explain the requirements to the user in the {@link nDropzoneProps.description}.
|
|
79
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
|
|
80
|
-
*/
|
|
81
|
-
readonly accept: StringConstructor;
|
|
82
|
-
/**
|
|
83
|
-
* Specifies the maximum size of an individual file in bytes.
|
|
84
|
-
* Make sure to explain the max size to the user in the {@link nDropzoneProps.description}.
|
|
85
|
-
*/
|
|
86
|
-
readonly maxFileSize: {
|
|
87
|
-
readonly type: NumberConstructor;
|
|
88
|
-
readonly default: number;
|
|
89
|
-
};
|
|
90
|
-
/**
|
|
91
|
-
* The maximum length of the file names.
|
|
92
|
-
* Files names longer than the specified amount of characters will be shortened.
|
|
93
|
-
* @see {@link maxLengthSplitCenter}
|
|
94
|
-
*/
|
|
95
|
-
readonly maxLengthFileNames: {
|
|
96
|
-
readonly type: NumberConstructor;
|
|
97
|
-
readonly default: 35;
|
|
98
|
-
};
|
|
99
|
-
/**
|
|
100
|
-
* A tailwind height class, which is applied to the dropzone area.
|
|
101
|
-
* It is recommended to use `min-h-*` classes,
|
|
102
|
-
* so the box is always large enough to display it's text.
|
|
103
|
-
*/
|
|
104
|
-
readonly height: {
|
|
105
|
-
readonly type: StringConstructor;
|
|
106
|
-
readonly default: "min-h-36";
|
|
107
|
-
};
|
|
108
|
-
/**
|
|
109
|
-
* If set to `true`, the dropzone is disabled and does not accept input anymore.
|
|
110
|
-
*/
|
|
111
|
-
readonly disabled: BooleanConstructor;
|
|
112
|
-
readonly value: import("vue").PropType<File[]>;
|
|
113
|
-
readonly onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
|
|
114
|
-
}, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
115
|
-
/**
|
|
116
|
-
* A description which files are allowed for this dropzone.
|
|
117
|
-
* This should include everything the user needs to know about
|
|
118
|
-
* the file type / the extensions and the maximum size of the file.
|
|
119
|
-
* @see {@link nDropzoneProps.accept}
|
|
120
|
-
* @see {@link nDropzoneProps.maxFileSize}
|
|
121
|
-
*/
|
|
122
|
-
readonly description: StringConstructor;
|
|
123
|
-
/**
|
|
124
|
-
* The maximum amount of files which can be added to the dropzone.
|
|
125
|
-
*/
|
|
126
|
-
readonly maxFiles: {
|
|
127
|
-
readonly type: NumberConstructor;
|
|
128
|
-
readonly default: 1;
|
|
129
|
-
};
|
|
130
|
-
/**
|
|
131
|
-
* Specifies which file types are accepted. The same syntax as with inputs of type file is used.
|
|
132
|
-
* Make sure to explain the requirements to the user in the {@link nDropzoneProps.description}.
|
|
133
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
|
|
134
|
-
*/
|
|
135
|
-
readonly accept: StringConstructor;
|
|
136
|
-
/**
|
|
137
|
-
* Specifies the maximum size of an individual file in bytes.
|
|
138
|
-
* Make sure to explain the max size to the user in the {@link nDropzoneProps.description}.
|
|
139
|
-
*/
|
|
140
|
-
readonly maxFileSize: {
|
|
141
|
-
readonly type: NumberConstructor;
|
|
142
|
-
readonly default: number;
|
|
143
|
-
};
|
|
144
|
-
/**
|
|
145
|
-
* The maximum length of the file names.
|
|
146
|
-
* Files names longer than the specified amount of characters will be shortened.
|
|
147
|
-
* @see {@link maxLengthSplitCenter}
|
|
148
|
-
*/
|
|
149
|
-
readonly maxLengthFileNames: {
|
|
150
|
-
readonly type: NumberConstructor;
|
|
151
|
-
readonly default: 35;
|
|
152
|
-
};
|
|
153
|
-
/**
|
|
154
|
-
* A tailwind height class, which is applied to the dropzone area.
|
|
155
|
-
* It is recommended to use `min-h-*` classes,
|
|
156
|
-
* so the box is always large enough to display it's text.
|
|
157
|
-
*/
|
|
158
|
-
readonly height: {
|
|
159
|
-
readonly type: StringConstructor;
|
|
160
|
-
readonly default: "min-h-36";
|
|
161
|
-
};
|
|
162
|
-
/**
|
|
163
|
-
* If set to `true`, the dropzone is disabled and does not accept input anymore.
|
|
164
|
-
*/
|
|
165
|
-
readonly disabled: BooleanConstructor;
|
|
166
|
-
readonly value: import("vue").PropType<File[]>;
|
|
167
|
-
readonly onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
|
|
168
|
-
}>> & {}, {
|
|
169
|
-
readonly disabled: boolean;
|
|
170
|
-
readonly maxFiles: number;
|
|
171
|
-
readonly maxFileSize: number;
|
|
172
|
-
readonly maxLengthFileNames: number;
|
|
173
|
-
readonly height: string;
|
|
174
|
-
}>;
|
|
60
|
+
declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
|
|
175
61
|
export { Component as NDropzone, Component as default };
|
package/components/NDropzone.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { createVNode as _createVNode, Fragment as _Fragment, createTextVNode as _createTextVNode, isVNode as _isVNode } from "vue";
|
|
2
2
|
import { trslc } from '../i18n';
|
|
3
3
|
import { createComponent } from '../utils/component';
|
|
4
4
|
import { maxLengthSplitCenter } from '../utils/stringMaxLength';
|
package/components/NForm.d.ts
CHANGED
|
@@ -17,27 +17,5 @@ export declare const nFormProps: {
|
|
|
17
17
|
* If it contains a button of type `submit` in it's hierarchy,
|
|
18
18
|
* it catches the submit event and passes it to the {@link ValidatedForm} in its `form` prop.
|
|
19
19
|
*/
|
|
20
|
-
declare const Component: import("vue").
|
|
21
|
-
/**
|
|
22
|
-
* The {@link ValidatedForm} which will be used to validate the inputs.
|
|
23
|
-
* All inputs in this forms hierarchy should be added to the {@link ValidatedForm}.
|
|
24
|
-
*/
|
|
25
|
-
readonly form: PropType<ValidatedForm>;
|
|
26
|
-
/**
|
|
27
|
-
* This is called, when a button of type `submit` in the hierarchy of this view is clicked
|
|
28
|
-
* and when the validation of the `form` was successful.
|
|
29
|
-
*/
|
|
30
|
-
readonly onSubmit: PropType<() => void>;
|
|
31
|
-
}, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
32
|
-
/**
|
|
33
|
-
* The {@link ValidatedForm} which will be used to validate the inputs.
|
|
34
|
-
* All inputs in this forms hierarchy should be added to the {@link ValidatedForm}.
|
|
35
|
-
*/
|
|
36
|
-
readonly form: PropType<ValidatedForm>;
|
|
37
|
-
/**
|
|
38
|
-
* This is called, when a button of type `submit` in the hierarchy of this view is clicked
|
|
39
|
-
* and when the validation of the `form` was successful.
|
|
40
|
-
*/
|
|
41
|
-
readonly onSubmit: PropType<() => void>;
|
|
42
|
-
}>> & {}, {}>;
|
|
20
|
+
declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
|
|
43
21
|
export { Component as NForm, Component as default };
|
|
@@ -25,89 +25,6 @@ export declare const nFormModalProps: {
|
|
|
25
25
|
readonly hideHeader: BooleanConstructor;
|
|
26
26
|
readonly hideFooter: BooleanConstructor;
|
|
27
27
|
readonly hideX: BooleanConstructor;
|
|
28
|
-
readonly title: StringConstructor;
|
|
29
|
-
readonly okText: {
|
|
30
|
-
readonly type: StringConstructor;
|
|
31
|
-
readonly default: string;
|
|
32
|
-
};
|
|
33
|
-
readonly okColor: {
|
|
34
|
-
readonly type: StringConstructor;
|
|
35
|
-
readonly default: "primary";
|
|
36
|
-
};
|
|
37
|
-
readonly closeOnOk: {
|
|
38
|
-
readonly type: BooleanConstructor;
|
|
39
|
-
readonly default: true;
|
|
40
|
-
};
|
|
41
|
-
readonly verticalPosition: {
|
|
42
|
-
readonly type: PropType<"start" | "center" | "end">;
|
|
43
|
-
readonly default: "center";
|
|
44
|
-
};
|
|
45
|
-
readonly horizontalPosition: {
|
|
46
|
-
readonly type: PropType<"start" | "center" | "end">;
|
|
47
|
-
readonly default: "center";
|
|
48
|
-
};
|
|
49
|
-
readonly hideOk: BooleanConstructor;
|
|
50
|
-
readonly okDisabled: BooleanConstructor;
|
|
51
|
-
readonly cancelText: {
|
|
52
|
-
readonly type: StringConstructor;
|
|
53
|
-
readonly default: string;
|
|
54
|
-
};
|
|
55
|
-
readonly cancelColor: {
|
|
56
|
-
readonly type: StringConstructor;
|
|
57
|
-
readonly default: "default";
|
|
58
|
-
};
|
|
59
|
-
readonly hideCancel: BooleanConstructor;
|
|
60
|
-
readonly onOk: PropType<() => void>;
|
|
61
|
-
readonly onCancel: PropType<() => void>;
|
|
62
|
-
readonly modal: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
|
|
63
|
-
readonly content: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
|
|
64
|
-
readonly header: PropType<() => JSX.Element>;
|
|
65
|
-
readonly footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
|
|
66
|
-
readonly value: PropType<boolean>;
|
|
67
|
-
readonly onUpdateValue: PropType<(newValue: boolean) => void>;
|
|
68
|
-
};
|
|
69
|
-
/**
|
|
70
|
-
* The `NFormModal` is a {@link NModal} with an integrated form.
|
|
71
|
-
* When submitting a `NFormModal` the form is first validated and
|
|
72
|
-
* only if the validation is succesful the `onOk` event is called.
|
|
73
|
-
*/
|
|
74
|
-
declare const Component: import("vue").DefineComponent<{
|
|
75
|
-
/**
|
|
76
|
-
* The maximum width of the modal. A regular tailwind class.
|
|
77
|
-
*/
|
|
78
|
-
readonly maxWidth: {
|
|
79
|
-
readonly type: PropType<TWMaxWidth>;
|
|
80
|
-
readonly default: "max-w-lg";
|
|
81
|
-
};
|
|
82
|
-
/**
|
|
83
|
-
* If set to `true` the modal closes when clicking on the background.
|
|
84
|
-
* Default is `false` as the accidental reseting of the whole form is very annoying.
|
|
85
|
-
*/
|
|
86
|
-
readonly closeOnBackground: {
|
|
87
|
-
readonly type: BooleanConstructor;
|
|
88
|
-
readonly default: false;
|
|
89
|
-
};
|
|
90
|
-
/**
|
|
91
|
-
* The {@link ValidatedForm} to validate the inputs.
|
|
92
|
-
* All inputs should be added to the form.
|
|
93
|
-
*/
|
|
94
|
-
readonly form: PropType<ValidatedForm>;
|
|
95
|
-
readonly hideHeader: BooleanConstructor;
|
|
96
|
-
readonly hideFooter: BooleanConstructor;
|
|
97
|
-
readonly hideX: BooleanConstructor;
|
|
98
|
-
readonly title: StringConstructor;
|
|
99
|
-
readonly okText: {
|
|
100
|
-
readonly type: StringConstructor;
|
|
101
|
-
readonly default: string;
|
|
102
|
-
};
|
|
103
|
-
readonly okColor: {
|
|
104
|
-
readonly type: StringConstructor;
|
|
105
|
-
readonly default: "primary";
|
|
106
|
-
};
|
|
107
|
-
readonly closeOnOk: {
|
|
108
|
-
readonly type: BooleanConstructor;
|
|
109
|
-
readonly default: true;
|
|
110
|
-
};
|
|
111
28
|
readonly verticalPosition: {
|
|
112
29
|
readonly type: PropType<"start" | "center" | "end">;
|
|
113
30
|
readonly default: "center";
|
|
@@ -116,49 +33,6 @@ declare const Component: import("vue").DefineComponent<{
|
|
|
116
33
|
readonly type: PropType<"start" | "center" | "end">;
|
|
117
34
|
readonly default: "center";
|
|
118
35
|
};
|
|
119
|
-
readonly hideOk: BooleanConstructor;
|
|
120
|
-
readonly okDisabled: BooleanConstructor;
|
|
121
|
-
readonly cancelText: {
|
|
122
|
-
readonly type: StringConstructor;
|
|
123
|
-
readonly default: string;
|
|
124
|
-
};
|
|
125
|
-
readonly cancelColor: {
|
|
126
|
-
readonly type: StringConstructor;
|
|
127
|
-
readonly default: "default";
|
|
128
|
-
};
|
|
129
|
-
readonly hideCancel: BooleanConstructor;
|
|
130
|
-
readonly onOk: PropType<() => void>;
|
|
131
|
-
readonly onCancel: PropType<() => void>;
|
|
132
|
-
readonly modal: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
|
|
133
|
-
readonly content: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
|
|
134
|
-
readonly header: PropType<() => JSX.Element>;
|
|
135
|
-
readonly footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
|
|
136
|
-
readonly value: PropType<boolean>;
|
|
137
|
-
readonly onUpdateValue: PropType<(newValue: boolean) => void>;
|
|
138
|
-
}, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
139
|
-
/**
|
|
140
|
-
* The maximum width of the modal. A regular tailwind class.
|
|
141
|
-
*/
|
|
142
|
-
readonly maxWidth: {
|
|
143
|
-
readonly type: PropType<TWMaxWidth>;
|
|
144
|
-
readonly default: "max-w-lg";
|
|
145
|
-
};
|
|
146
|
-
/**
|
|
147
|
-
* If set to `true` the modal closes when clicking on the background.
|
|
148
|
-
* Default is `false` as the accidental reseting of the whole form is very annoying.
|
|
149
|
-
*/
|
|
150
|
-
readonly closeOnBackground: {
|
|
151
|
-
readonly type: BooleanConstructor;
|
|
152
|
-
readonly default: false;
|
|
153
|
-
};
|
|
154
|
-
/**
|
|
155
|
-
* The {@link ValidatedForm} to validate the inputs.
|
|
156
|
-
* All inputs should be added to the form.
|
|
157
|
-
*/
|
|
158
|
-
readonly form: PropType<ValidatedForm>;
|
|
159
|
-
readonly hideHeader: BooleanConstructor;
|
|
160
|
-
readonly hideFooter: BooleanConstructor;
|
|
161
|
-
readonly hideX: BooleanConstructor;
|
|
162
36
|
readonly title: StringConstructor;
|
|
163
37
|
readonly okText: {
|
|
164
38
|
readonly type: StringConstructor;
|
|
@@ -172,14 +46,6 @@ declare const Component: import("vue").DefineComponent<{
|
|
|
172
46
|
readonly type: BooleanConstructor;
|
|
173
47
|
readonly default: true;
|
|
174
48
|
};
|
|
175
|
-
readonly verticalPosition: {
|
|
176
|
-
readonly type: PropType<"start" | "center" | "end">;
|
|
177
|
-
readonly default: "center";
|
|
178
|
-
};
|
|
179
|
-
readonly horizontalPosition: {
|
|
180
|
-
readonly type: PropType<"start" | "center" | "end">;
|
|
181
|
-
readonly default: "center";
|
|
182
|
-
};
|
|
183
49
|
readonly hideOk: BooleanConstructor;
|
|
184
50
|
readonly okDisabled: BooleanConstructor;
|
|
185
51
|
readonly cancelText: {
|
|
@@ -199,21 +65,11 @@ declare const Component: import("vue").DefineComponent<{
|
|
|
199
65
|
readonly footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
|
|
200
66
|
readonly value: PropType<boolean>;
|
|
201
67
|
readonly onUpdateValue: PropType<(newValue: boolean) => void>;
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
readonly closeOnOk: boolean;
|
|
210
|
-
readonly verticalPosition: "start" | "center" | "end";
|
|
211
|
-
readonly horizontalPosition: "start" | "center" | "end";
|
|
212
|
-
readonly hideOk: boolean;
|
|
213
|
-
readonly okDisabled: boolean;
|
|
214
|
-
readonly cancelText: string;
|
|
215
|
-
readonly cancelColor: string;
|
|
216
|
-
readonly closeOnBackground: boolean;
|
|
217
|
-
readonly hideCancel: boolean;
|
|
218
|
-
}>;
|
|
68
|
+
};
|
|
69
|
+
/**
|
|
70
|
+
* The `NFormModal` is a {@link NModal} with an integrated form.
|
|
71
|
+
* When submitting a `NFormModal` the form is first validated and
|
|
72
|
+
* only if the validation is succesful the `onOk` event is called.
|
|
73
|
+
*/
|
|
74
|
+
declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
|
|
219
75
|
export { Component as NFormModal, Component as default };
|
|
@@ -7,9 +7,7 @@ export declare const nIconButtonProps: {
|
|
|
7
7
|
readonly tooltipHide: BooleanConstructor;
|
|
8
8
|
readonly tooltipShow: BooleanConstructor;
|
|
9
9
|
readonly tooltipPlacement: {
|
|
10
|
-
readonly type: PropType<import("./NTooltip").TooltipPlacement>;
|
|
11
|
-
* If set to `true` the icon-button is disabled and no interaction is possible.
|
|
12
|
-
*/
|
|
10
|
+
readonly type: PropType<import("./NTooltip").TooltipPlacement>;
|
|
13
11
|
readonly default: "auto";
|
|
14
12
|
};
|
|
15
13
|
readonly tooltipMaxWidth: {
|
|
@@ -55,7 +53,7 @@ export declare const nIconButtonProps: {
|
|
|
55
53
|
* The html attribute, which indicates the type of the button.
|
|
56
54
|
*/
|
|
57
55
|
readonly type: {
|
|
58
|
-
readonly type: PropType<"
|
|
56
|
+
readonly type: PropType<"submit" | "button" | "reset">;
|
|
59
57
|
readonly default: "button";
|
|
60
58
|
};
|
|
61
59
|
/**
|
|
@@ -77,159 +75,5 @@ export declare const nIconButtonProps: {
|
|
|
77
75
|
/**
|
|
78
76
|
* The `NIconButton` is a regular button which does not have any text but an icon instead.
|
|
79
77
|
*/
|
|
80
|
-
declare const Component: import("vue").
|
|
81
|
-
readonly tooltipText: StringConstructor;
|
|
82
|
-
readonly tooltipContent: PropType<() => JSX.Element>;
|
|
83
|
-
readonly tooltipHide: BooleanConstructor;
|
|
84
|
-
readonly tooltipShow: BooleanConstructor;
|
|
85
|
-
readonly tooltipPlacement: {
|
|
86
|
-
readonly type: PropType<import("./NTooltip").TooltipPlacement>; /**
|
|
87
|
-
* If set to `true` the icon-button is disabled and no interaction is possible.
|
|
88
|
-
*/
|
|
89
|
-
readonly default: "auto";
|
|
90
|
-
};
|
|
91
|
-
readonly tooltipMaxWidth: {
|
|
92
|
-
readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
|
|
93
|
-
readonly default: "max-w-xs";
|
|
94
|
-
};
|
|
95
|
-
readonly tooltipWrapperClass: StringConstructor;
|
|
96
|
-
readonly tooltipContentClass: StringConstructor;
|
|
97
|
-
readonly tooltipArrowClass: StringConstructor;
|
|
98
|
-
/**
|
|
99
|
-
* The icon of the icon-button.
|
|
100
|
-
*/
|
|
101
|
-
readonly icon: {
|
|
102
|
-
readonly type: PropType<HeroIcon>;
|
|
103
|
-
readonly required: true;
|
|
104
|
-
};
|
|
105
|
-
/**
|
|
106
|
-
* The route of the icon-button. If this is set, the icon-button becomes a {@link RouterLink}.
|
|
107
|
-
*/
|
|
108
|
-
readonly route: PropType<RouteLocationRaw>;
|
|
109
|
-
/**
|
|
110
|
-
* The color of the icon-button.
|
|
111
|
-
*/
|
|
112
|
-
readonly color: {
|
|
113
|
-
readonly type: StringConstructor;
|
|
114
|
-
readonly default: "default";
|
|
115
|
-
};
|
|
116
|
-
/**
|
|
117
|
-
* The shade of the icon-button.
|
|
118
|
-
*/
|
|
119
|
-
readonly shade: {
|
|
120
|
-
readonly type: NumberConstructor;
|
|
121
|
-
readonly default: 500;
|
|
122
|
-
};
|
|
123
|
-
/**
|
|
124
|
-
* The size of the icon in tailwind-units.
|
|
125
|
-
*/
|
|
126
|
-
readonly size: {
|
|
127
|
-
readonly type: NumberConstructor;
|
|
128
|
-
readonly default: 5;
|
|
129
|
-
};
|
|
130
|
-
/**
|
|
131
|
-
* The html attribute, which indicates the type of the button.
|
|
132
|
-
*/
|
|
133
|
-
readonly type: {
|
|
134
|
-
readonly type: PropType<"button" | "submit" | "reset">;
|
|
135
|
-
readonly default: "button";
|
|
136
|
-
};
|
|
137
|
-
/**
|
|
138
|
-
* If set to `true` the icon-button is disabled and no interaction is possible.
|
|
139
|
-
*/
|
|
140
|
-
readonly disabled: BooleanConstructor;
|
|
141
|
-
/**
|
|
142
|
-
* Adds the classes to the icon-button.
|
|
143
|
-
* Use this instead of `class` to style the button, because the button is wrapped inside
|
|
144
|
-
* a div for the tooltip and `class` would be applied to the wrapping div.
|
|
145
|
-
*/
|
|
146
|
-
readonly buttonClass: StringConstructor;
|
|
147
|
-
/**
|
|
148
|
-
* This is called when the icon-button is clicked.
|
|
149
|
-
* It is only called when the `route` prop is not set on the icon-button.
|
|
150
|
-
*/
|
|
151
|
-
readonly onClick: PropType<() => void>;
|
|
152
|
-
}, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
153
|
-
readonly tooltipText: StringConstructor;
|
|
154
|
-
readonly tooltipContent: PropType<() => JSX.Element>;
|
|
155
|
-
readonly tooltipHide: BooleanConstructor;
|
|
156
|
-
readonly tooltipShow: BooleanConstructor;
|
|
157
|
-
readonly tooltipPlacement: {
|
|
158
|
-
readonly type: PropType<import("./NTooltip").TooltipPlacement>; /**
|
|
159
|
-
* If set to `true` the icon-button is disabled and no interaction is possible.
|
|
160
|
-
*/
|
|
161
|
-
readonly default: "auto";
|
|
162
|
-
};
|
|
163
|
-
readonly tooltipMaxWidth: {
|
|
164
|
-
readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
|
|
165
|
-
readonly default: "max-w-xs";
|
|
166
|
-
};
|
|
167
|
-
readonly tooltipWrapperClass: StringConstructor;
|
|
168
|
-
readonly tooltipContentClass: StringConstructor;
|
|
169
|
-
readonly tooltipArrowClass: StringConstructor;
|
|
170
|
-
/**
|
|
171
|
-
* The icon of the icon-button.
|
|
172
|
-
*/
|
|
173
|
-
readonly icon: {
|
|
174
|
-
readonly type: PropType<HeroIcon>;
|
|
175
|
-
readonly required: true;
|
|
176
|
-
};
|
|
177
|
-
/**
|
|
178
|
-
* The route of the icon-button. If this is set, the icon-button becomes a {@link RouterLink}.
|
|
179
|
-
*/
|
|
180
|
-
readonly route: PropType<RouteLocationRaw>;
|
|
181
|
-
/**
|
|
182
|
-
* The color of the icon-button.
|
|
183
|
-
*/
|
|
184
|
-
readonly color: {
|
|
185
|
-
readonly type: StringConstructor;
|
|
186
|
-
readonly default: "default";
|
|
187
|
-
};
|
|
188
|
-
/**
|
|
189
|
-
* The shade of the icon-button.
|
|
190
|
-
*/
|
|
191
|
-
readonly shade: {
|
|
192
|
-
readonly type: NumberConstructor;
|
|
193
|
-
readonly default: 500;
|
|
194
|
-
};
|
|
195
|
-
/**
|
|
196
|
-
* The size of the icon in tailwind-units.
|
|
197
|
-
*/
|
|
198
|
-
readonly size: {
|
|
199
|
-
readonly type: NumberConstructor;
|
|
200
|
-
readonly default: 5;
|
|
201
|
-
};
|
|
202
|
-
/**
|
|
203
|
-
* The html attribute, which indicates the type of the button.
|
|
204
|
-
*/
|
|
205
|
-
readonly type: {
|
|
206
|
-
readonly type: PropType<"button" | "submit" | "reset">;
|
|
207
|
-
readonly default: "button";
|
|
208
|
-
};
|
|
209
|
-
/**
|
|
210
|
-
* If set to `true` the icon-button is disabled and no interaction is possible.
|
|
211
|
-
*/
|
|
212
|
-
readonly disabled: BooleanConstructor;
|
|
213
|
-
/**
|
|
214
|
-
* Adds the classes to the icon-button.
|
|
215
|
-
* Use this instead of `class` to style the button, because the button is wrapped inside
|
|
216
|
-
* a div for the tooltip and `class` would be applied to the wrapping div.
|
|
217
|
-
*/
|
|
218
|
-
readonly buttonClass: StringConstructor;
|
|
219
|
-
/**
|
|
220
|
-
* This is called when the icon-button is clicked.
|
|
221
|
-
* It is only called when the `route` prop is not set on the icon-button.
|
|
222
|
-
*/
|
|
223
|
-
readonly onClick: PropType<() => void>;
|
|
224
|
-
}>> & {}, {
|
|
225
|
-
readonly color: string;
|
|
226
|
-
readonly shade: number;
|
|
227
|
-
readonly size: number;
|
|
228
|
-
readonly type: "button" | "submit" | "reset";
|
|
229
|
-
readonly tooltipHide: boolean;
|
|
230
|
-
readonly tooltipShow: boolean;
|
|
231
|
-
readonly tooltipPlacement: import("./NTooltip").TooltipPlacement;
|
|
232
|
-
readonly tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
|
|
233
|
-
readonly disabled: boolean;
|
|
234
|
-
}>;
|
|
78
|
+
declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
|
|
235
79
|
export { Component as NIconButton, Component as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { createVNode as _createVNode, isVNode as _isVNode } from "vue";
|
|
2
2
|
import { createComponent } from '../utils/component';
|
|
3
3
|
import { RouterLink } from 'vue-router';
|
|
4
4
|
import { nButtonProps } from './NButton';
|