@a-vision-software/vue-input-components 1.1.31 → 1.1.32
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/dist/src/components/FileUpload.vue.d.ts +27 -0
- package/dist/src/components/TextAreaInput.vue.d.ts +80 -0
- package/dist/src/components/TextInput.vue.d.ts +57 -0
- package/dist/src/index.d.ts +6 -0
- package/dist/src/main.d.ts +1 -0
- package/dist/src/router/index.d.ts +2 -0
- package/dist/src/types.d.ts +44 -0
- package/dist/vue-input-components.css +1 -1
- package/dist/vue-input-components.es.js +197 -133
- package/dist/vue-input-components.umd.js +1 -1
- package/package.json +1 -1
- package/src/components/TextAreaInput.vue +116 -0
- package/src/index.ts +8 -2
- package/src/types.ts +48 -0
- package/dist/index.d.ts +0 -96
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
2
|
+
icon?: string | undefined;
|
|
3
|
+
uploadUrl?: string | undefined;
|
|
4
|
+
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
5
|
+
"upload-complete": (files: File[]) => void;
|
|
6
|
+
"upload-error": (error: string) => void;
|
|
7
|
+
"files-selected": (files: File[]) => void;
|
|
8
|
+
"start-upload": (files: File[]) => void;
|
|
9
|
+
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
10
|
+
icon?: string | undefined;
|
|
11
|
+
uploadUrl?: string | undefined;
|
|
12
|
+
}>>> & Readonly<{
|
|
13
|
+
"onUpload-complete"?: ((files: File[]) => any) | undefined;
|
|
14
|
+
"onUpload-error"?: ((error: string) => any) | undefined;
|
|
15
|
+
"onFiles-selected"?: ((files: File[]) => any) | undefined;
|
|
16
|
+
"onStart-upload"?: ((files: File[]) => any) | undefined;
|
|
17
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
18
|
+
export default _default;
|
|
19
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
20
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
21
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
22
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
23
|
+
} : {
|
|
24
|
+
type: import('vue').PropType<T[K]>;
|
|
25
|
+
required: true;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
2
|
+
modelValue: {
|
|
3
|
+
type: StringConstructor;
|
|
4
|
+
required: true;
|
|
5
|
+
};
|
|
6
|
+
label: {
|
|
7
|
+
type: StringConstructor;
|
|
8
|
+
default: string;
|
|
9
|
+
};
|
|
10
|
+
placeholder: {
|
|
11
|
+
type: StringConstructor;
|
|
12
|
+
default: string;
|
|
13
|
+
};
|
|
14
|
+
error: {
|
|
15
|
+
type: StringConstructor;
|
|
16
|
+
default: string;
|
|
17
|
+
};
|
|
18
|
+
disabled: {
|
|
19
|
+
type: BooleanConstructor;
|
|
20
|
+
default: boolean;
|
|
21
|
+
};
|
|
22
|
+
required: {
|
|
23
|
+
type: BooleanConstructor;
|
|
24
|
+
default: boolean;
|
|
25
|
+
};
|
|
26
|
+
maxlength: {
|
|
27
|
+
type: NumberConstructor;
|
|
28
|
+
default: undefined;
|
|
29
|
+
};
|
|
30
|
+
rows: {
|
|
31
|
+
type: NumberConstructor;
|
|
32
|
+
default: number;
|
|
33
|
+
};
|
|
34
|
+
}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
35
|
+
"update:modelValue": (...args: any[]) => void;
|
|
36
|
+
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
37
|
+
modelValue: {
|
|
38
|
+
type: StringConstructor;
|
|
39
|
+
required: true;
|
|
40
|
+
};
|
|
41
|
+
label: {
|
|
42
|
+
type: StringConstructor;
|
|
43
|
+
default: string;
|
|
44
|
+
};
|
|
45
|
+
placeholder: {
|
|
46
|
+
type: StringConstructor;
|
|
47
|
+
default: string;
|
|
48
|
+
};
|
|
49
|
+
error: {
|
|
50
|
+
type: StringConstructor;
|
|
51
|
+
default: string;
|
|
52
|
+
};
|
|
53
|
+
disabled: {
|
|
54
|
+
type: BooleanConstructor;
|
|
55
|
+
default: boolean;
|
|
56
|
+
};
|
|
57
|
+
required: {
|
|
58
|
+
type: BooleanConstructor;
|
|
59
|
+
default: boolean;
|
|
60
|
+
};
|
|
61
|
+
maxlength: {
|
|
62
|
+
type: NumberConstructor;
|
|
63
|
+
default: undefined;
|
|
64
|
+
};
|
|
65
|
+
rows: {
|
|
66
|
+
type: NumberConstructor;
|
|
67
|
+
default: number;
|
|
68
|
+
};
|
|
69
|
+
}>> & Readonly<{
|
|
70
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
71
|
+
}>, {
|
|
72
|
+
error: string;
|
|
73
|
+
disabled: boolean;
|
|
74
|
+
label: string;
|
|
75
|
+
placeholder: string;
|
|
76
|
+
required: boolean;
|
|
77
|
+
maxlength: number;
|
|
78
|
+
rows: number;
|
|
79
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
80
|
+
export default _default;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
2
|
+
modelValue: string;
|
|
3
|
+
label?: string | undefined;
|
|
4
|
+
type?: string | undefined;
|
|
5
|
+
icon?: string | undefined;
|
|
6
|
+
placeholder?: string | undefined;
|
|
7
|
+
required?: boolean | undefined;
|
|
8
|
+
disabled?: boolean | undefined;
|
|
9
|
+
error?: string | undefined;
|
|
10
|
+
success?: string | undefined;
|
|
11
|
+
labelPosition?: "top" | "left" | undefined;
|
|
12
|
+
labelAlign?: "left" | "right" | "center" | undefined;
|
|
13
|
+
totalWidth?: string | undefined;
|
|
14
|
+
inputWidth?: string | undefined;
|
|
15
|
+
labelWidth?: string | undefined;
|
|
16
|
+
autosave?: ((value: string) => Promise<void>) | undefined;
|
|
17
|
+
isTextarea?: boolean | undefined;
|
|
18
|
+
maxHeight?: string | undefined;
|
|
19
|
+
height?: string | undefined;
|
|
20
|
+
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
21
|
+
"update:modelValue": (value: string) => void;
|
|
22
|
+
changed: () => void;
|
|
23
|
+
saved: () => void;
|
|
24
|
+
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
25
|
+
modelValue: string;
|
|
26
|
+
label?: string | undefined;
|
|
27
|
+
type?: string | undefined;
|
|
28
|
+
icon?: string | undefined;
|
|
29
|
+
placeholder?: string | undefined;
|
|
30
|
+
required?: boolean | undefined;
|
|
31
|
+
disabled?: boolean | undefined;
|
|
32
|
+
error?: string | undefined;
|
|
33
|
+
success?: string | undefined;
|
|
34
|
+
labelPosition?: "top" | "left" | undefined;
|
|
35
|
+
labelAlign?: "left" | "right" | "center" | undefined;
|
|
36
|
+
totalWidth?: string | undefined;
|
|
37
|
+
inputWidth?: string | undefined;
|
|
38
|
+
labelWidth?: string | undefined;
|
|
39
|
+
autosave?: ((value: string) => Promise<void>) | undefined;
|
|
40
|
+
isTextarea?: boolean | undefined;
|
|
41
|
+
maxHeight?: string | undefined;
|
|
42
|
+
height?: string | undefined;
|
|
43
|
+
}>>> & Readonly<{
|
|
44
|
+
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
45
|
+
onChanged?: (() => any) | undefined;
|
|
46
|
+
onSaved?: (() => any) | undefined;
|
|
47
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
48
|
+
export default _default;
|
|
49
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
50
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
51
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
52
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
53
|
+
} : {
|
|
54
|
+
type: import('vue').PropType<T[K]>;
|
|
55
|
+
required: true;
|
|
56
|
+
};
|
|
57
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { default as TextInput } from './components/TextInput';
|
|
2
|
+
import { default as TextAreaInput } from './components/TextAreaInput';
|
|
3
|
+
import { default as FileUpload } from './components/FileUpload';
|
|
4
|
+
|
|
5
|
+
export { TextInput, TextAreaInput, FileUpload };
|
|
6
|
+
export * from './types';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { Component } from 'vue';
|
|
2
|
+
|
|
3
|
+
export interface TextInputProps {
|
|
4
|
+
modelValue: string;
|
|
5
|
+
label?: string;
|
|
6
|
+
placeholder?: string;
|
|
7
|
+
error?: string;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
required?: boolean;
|
|
10
|
+
maxlength?: number;
|
|
11
|
+
}
|
|
12
|
+
export interface TextAreaInputProps {
|
|
13
|
+
modelValue: string;
|
|
14
|
+
label?: string;
|
|
15
|
+
placeholder?: string;
|
|
16
|
+
error?: string;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
required?: boolean;
|
|
19
|
+
maxlength?: number;
|
|
20
|
+
rows?: number;
|
|
21
|
+
}
|
|
22
|
+
export interface FileUploadProps {
|
|
23
|
+
modelValue: File[];
|
|
24
|
+
label?: string;
|
|
25
|
+
placeholder?: string;
|
|
26
|
+
error?: string;
|
|
27
|
+
disabled?: boolean;
|
|
28
|
+
required?: boolean;
|
|
29
|
+
multiple?: boolean;
|
|
30
|
+
accept?: string;
|
|
31
|
+
maxSize?: number;
|
|
32
|
+
uploadUrl?: string;
|
|
33
|
+
}
|
|
34
|
+
export interface FileUploadEmits {
|
|
35
|
+
(e: 'update:modelValue', files: File[]): void;
|
|
36
|
+
(e: 'files-selected', files: File[]): void;
|
|
37
|
+
(e: 'start-upload', files: File[]): void;
|
|
38
|
+
(e: 'upload-progress', progress: number): void;
|
|
39
|
+
(e: 'upload-success', response: any): void;
|
|
40
|
+
(e: 'upload-error', error: Error): void;
|
|
41
|
+
}
|
|
42
|
+
export type TextInputComponent = Component<TextInputProps>;
|
|
43
|
+
export type TextAreaInputComponent = Component<TextAreaInputProps>;
|
|
44
|
+
export type FileUploadComponent = Component<FileUploadProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.text-input[data-v-cc2497d0]{display:grid;gap:.5rem;width:100%;margin-top:.7rem}.text-input.label-top[data-v-cc2497d0]{grid-template-rows:auto 1fr}.text-input.label-left[data-v-cc2497d0]{grid-template-columns:30% 1fr;align-items:start;gap:1rem}.text-input.label-left .label[data-v-cc2497d0]{padding-top:.75rem;width:100%}.label[data-v-cc2497d0]{font-weight:500;color:var(--text-color);text-align:left}.label-align-left .label[data-v-cc2497d0]{text-align:left}.label-align-right .label[data-v-cc2497d0]{text-align:right}.label-align-center .label[data-v-cc2497d0]{text-align:center}.required[data-v-cc2497d0]{color:var(--danger-color);margin-left:.25rem}.input-wrapper[data-v-cc2497d0]{position:relative;display:grid;grid-template-columns:1fr;border:1px solid var(--border-color);border-radius:.5rem;transition:all .2s ease;width:100%;min-height:2rem;background:var(--input-bg-color)}.input-wrapper.has-icon[data-v-cc2497d0]{grid-template-columns:auto 1fr}.input-wrapper[data-v-cc2497d0]:focus-within{border-color:var(--primary-color);box-shadow:0 0 0 3px var(--shadow-color)}.input-wrapper.has-error[data-v-cc2497d0]{border-color:var(--danger-color);border-bottom-left-radius:0;border-bottom-right-radius:0}.icon-wrapper[data-v-cc2497d0]{display:grid;place-items:start;padding:1rem;border-right:1px solid var(--border-color);cursor:pointer;overflow:hidden}.icon-wrapper[data-v-cc2497d0]:hover{background-color:var(--input-bg-hover)}.icon[data-v-cc2497d0]{color:var(--text-muted);font-size:1rem}.input[data-v-cc2497d0]{padding:.75rem 1rem;border:none;outline:none;font-size:1rem;color:var(--text-color);background:transparent;width:100%;line-height:var(--line-height)}.input[data-v-cc2497d0]::placeholder{color:var(--text-muted)}.input[data-v-cc2497d0]:disabled{background-color:var(--input-bg-disabled);cursor:not-allowed}.message[data-v-cc2497d0]{position:absolute;bottom:-1.5rem;left:0;font-size:.75rem;white-space:nowrap}.error-message[data-v-cc2497d0]{position:absolute;bottom:0;left:0;right:0;padding:.25rem .75rem;background-color:var(--danger-color);color:#fff;font-size:.75rem;border-radius:0 0 .5rem .5rem;transform:translateY(100%);transition:transform .2s ease;line-height:var(--line-height);z-index:1}.success-message[data-v-cc2497d0]{position:absolute;bottom:-1.5rem;left:0;color:var(--success-color);font-size:.75rem;line-height:var(--line-height)}.status-indicator[data-v-cc2497d0]{position:absolute;top:-.1rem;right:.5rem;font-size:.75rem;color:var(--text-muted);line-height:0px;background-color:var(--input-bg-color);padding:0 .25rem}.saved-indicator[data-v-cc2497d0]{color:var(--success-color)}.changed-indicator[data-v-cc2497d0]{color:var(--warning-color)}.fade-enter-active[data-v-cc2497d0],.fade-leave-active[data-v-cc2497d0]{transition:opacity .2s ease}.fade-enter-from[data-v-cc2497d0],.fade-leave-to[data-v-cc2497d0]{opacity:0}textarea[data-v-cc2497d0]{min-height:var(--textarea-height, 5.5rem);max-height:var(--max-textarea-height, 14rem);overflow-y:auto;resize:none}.file-upload[data-v-75b2aeea]{width:100%;max-width:600px;margin:0 auto}.upload-area[data-v-75b2aeea]{border:2px dashed var(--upload-border-color);border-radius:.75rem;padding:2rem;text-align:center;cursor:pointer;transition:all .3s ease;background-color:var(--upload-bg-color)}.upload-area.is-dragging[data-v-75b2aeea]{border-color:var(--upload-dragging-border-color);background-color:var(--upload-dragging-bg-color)}.upload-area.has-files[data-v-75b2aeea]{border-color:var(--upload-has-files-border-color);background-color:var(--upload-has-files-bg-color)}.file-input[data-v-75b2aeea]{display:none}.upload-content[data-v-75b2aeea]{display:flex;flex-direction:column;align-items:center;gap:1rem}.upload-content[data-v-75b2aeea] svg{font-size:2rem;color:var(--upload-icon-color)}.selected-files[data-v-75b2aeea]{width:100%;text-align:left;max-height:200px;overflow-y:auto;font-size:.75rem;color:var(--upload-text-color)}.file-info[data-v-75b2aeea]{display:flex;justify-content:space-between;align-items:center;padding:.125rem 0;border-radius:.25rem;gap:.5rem;font-size:.75rem}.file-name[data-v-75b2aeea]{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:.5rem}.file-size[data-v-75b2aeea]{font-size:.7rem;flex-shrink:0}.error-message[data-v-75b2aeea]{color:var(--error-text-color);margin-top:1rem;font-size:.875rem}.progress-bar[data-v-75b2aeea]{height:.5rem;background-color:var(--progress-bg-color);border-radius:.25rem;margin-top:1rem;overflow:hidden}.progress[data-v-75b2aeea]{height:100%;background-color:var(--progress-color);transition:width .3s ease}.status-message[data-v-75b2aeea]{margin-top:1rem;padding:.5rem;border-radius:.25rem;font-size:.875rem}.status-message.success[data-v-75b2aeea]{background-color:var(--success-bg-color);color:var(--success-text-color)}.status-message.error[data-v-75b2aeea]{background-color:var(--error-bg-color);color:var(--error-text-color)}.upload-button[data-v-75b2aeea]{margin-top:1rem;padding:.5rem 1rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:.25rem;cursor:pointer;font-size:.875rem;transition:background-color .3s ease}.upload-button[data-v-75b2aeea]:hover{background-color:var(--primary-color-light)}
|
|
1
|
+
.text-input[data-v-cc2497d0]{display:grid;gap:.5rem;width:100%;margin-top:.7rem}.text-input.label-top[data-v-cc2497d0]{grid-template-rows:auto 1fr}.text-input.label-left[data-v-cc2497d0]{grid-template-columns:30% 1fr;align-items:start;gap:1rem}.text-input.label-left .label[data-v-cc2497d0]{padding-top:.75rem;width:100%}.label[data-v-cc2497d0]{font-weight:500;color:var(--text-color);text-align:left}.label-align-left .label[data-v-cc2497d0]{text-align:left}.label-align-right .label[data-v-cc2497d0]{text-align:right}.label-align-center .label[data-v-cc2497d0]{text-align:center}.required[data-v-cc2497d0]{color:var(--danger-color);margin-left:.25rem}.input-wrapper[data-v-cc2497d0]{position:relative;display:grid;grid-template-columns:1fr;border:1px solid var(--border-color);border-radius:.5rem;transition:all .2s ease;width:100%;min-height:2rem;background:var(--input-bg-color)}.input-wrapper.has-icon[data-v-cc2497d0]{grid-template-columns:auto 1fr}.input-wrapper[data-v-cc2497d0]:focus-within{border-color:var(--primary-color);box-shadow:0 0 0 3px var(--shadow-color)}.input-wrapper.has-error[data-v-cc2497d0]{border-color:var(--danger-color);border-bottom-left-radius:0;border-bottom-right-radius:0}.icon-wrapper[data-v-cc2497d0]{display:grid;place-items:start;padding:1rem;border-right:1px solid var(--border-color);cursor:pointer;overflow:hidden}.icon-wrapper[data-v-cc2497d0]:hover{background-color:var(--input-bg-hover)}.icon[data-v-cc2497d0]{color:var(--text-muted);font-size:1rem}.input[data-v-cc2497d0]{padding:.75rem 1rem;border:none;outline:none;font-size:1rem;color:var(--text-color);background:transparent;width:100%;line-height:var(--line-height)}.input[data-v-cc2497d0]::placeholder{color:var(--text-muted)}.input[data-v-cc2497d0]:disabled{background-color:var(--input-bg-disabled);cursor:not-allowed}.message[data-v-cc2497d0]{position:absolute;bottom:-1.5rem;left:0;font-size:.75rem;white-space:nowrap}.error-message[data-v-cc2497d0]{position:absolute;bottom:0;left:0;right:0;padding:.25rem .75rem;background-color:var(--danger-color);color:#fff;font-size:.75rem;border-radius:0 0 .5rem .5rem;transform:translateY(100%);transition:transform .2s ease;line-height:var(--line-height);z-index:1}.success-message[data-v-cc2497d0]{position:absolute;bottom:-1.5rem;left:0;color:var(--success-color);font-size:.75rem;line-height:var(--line-height)}.status-indicator[data-v-cc2497d0]{position:absolute;top:-.1rem;right:.5rem;font-size:.75rem;color:var(--text-muted);line-height:0px;background-color:var(--input-bg-color);padding:0 .25rem}.saved-indicator[data-v-cc2497d0]{color:var(--success-color)}.changed-indicator[data-v-cc2497d0]{color:var(--warning-color)}.fade-enter-active[data-v-cc2497d0],.fade-leave-active[data-v-cc2497d0]{transition:opacity .2s ease}.fade-enter-from[data-v-cc2497d0],.fade-leave-to[data-v-cc2497d0]{opacity:0}textarea[data-v-cc2497d0]{min-height:var(--textarea-height, 5.5rem);max-height:var(--max-textarea-height, 14rem);overflow-y:auto;resize:none}.text-area-input[data-v-2e843729]{display:flex;flex-direction:column;gap:.5rem;width:100%}label[data-v-2e843729]{font-size:.875rem;font-weight:500;color:var(--text-color)}label.required[data-v-2e843729]:after{content:"*";color:var(--error-color);margin-left:.25rem}textarea[data-v-2e843729]{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:.375rem;font-size:.875rem;line-height:1.5;color:var(--text-color);background-color:var(--bg-color);transition:border-color .2s ease-in-out;resize:vertical;min-height:2.5rem}textarea[data-v-2e843729]:focus{outline:none;border-color:var(--primary-color)}textarea[data-v-2e843729]:disabled{background-color:var(--disabled-bg-color);cursor:not-allowed}textarea.error[data-v-2e843729]{border-color:var(--error-color)}.error-message[data-v-2e843729]{font-size:.75rem;color:var(--error-color)}.file-upload[data-v-75b2aeea]{width:100%;max-width:600px;margin:0 auto}.upload-area[data-v-75b2aeea]{border:2px dashed var(--upload-border-color);border-radius:.75rem;padding:2rem;text-align:center;cursor:pointer;transition:all .3s ease;background-color:var(--upload-bg-color)}.upload-area.is-dragging[data-v-75b2aeea]{border-color:var(--upload-dragging-border-color);background-color:var(--upload-dragging-bg-color)}.upload-area.has-files[data-v-75b2aeea]{border-color:var(--upload-has-files-border-color);background-color:var(--upload-has-files-bg-color)}.file-input[data-v-75b2aeea]{display:none}.upload-content[data-v-75b2aeea]{display:flex;flex-direction:column;align-items:center;gap:1rem}.upload-content[data-v-75b2aeea] svg{font-size:2rem;color:var(--upload-icon-color)}.selected-files[data-v-75b2aeea]{width:100%;text-align:left;max-height:200px;overflow-y:auto;font-size:.75rem;color:var(--upload-text-color)}.file-info[data-v-75b2aeea]{display:flex;justify-content:space-between;align-items:center;padding:.125rem 0;border-radius:.25rem;gap:.5rem;font-size:.75rem}.file-name[data-v-75b2aeea]{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:.5rem}.file-size[data-v-75b2aeea]{font-size:.7rem;flex-shrink:0}.error-message[data-v-75b2aeea]{color:var(--error-text-color);margin-top:1rem;font-size:.875rem}.progress-bar[data-v-75b2aeea]{height:.5rem;background-color:var(--progress-bg-color);border-radius:.25rem;margin-top:1rem;overflow:hidden}.progress[data-v-75b2aeea]{height:100%;background-color:var(--progress-color);transition:width .3s ease}.status-message[data-v-75b2aeea]{margin-top:1rem;padding:.5rem;border-radius:.25rem;font-size:.875rem}.status-message.success[data-v-75b2aeea]{background-color:var(--success-bg-color);color:var(--success-text-color)}.status-message.error[data-v-75b2aeea]{background-color:var(--error-bg-color);color:var(--error-text-color)}.upload-button[data-v-75b2aeea]{margin-top:1rem;padding:.5rem 1rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:.25rem;cursor:pointer;font-size:.875rem;transition:background-color .3s ease}.upload-button[data-v-75b2aeea]:hover{background-color:var(--primary-color-light)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as D, computed as V, ref as p, onUnmounted as W, resolveComponent as z, createElementBlock as s, openBlock as o, normalizeStyle as L, normalizeClass as k, createCommentVNode as d, createElementVNode as g, toDisplayString as h, createVNode as F, Transition as M, withCtx as A, watch as H, withModifiers as I, Fragment as P, renderList as R } from "vue";
|
|
2
2
|
const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disabled"], j = ["id", "value", "placeholder", "required", "disabled"], G = {
|
|
3
3
|
key: 3,
|
|
4
4
|
class: "status-indicator required-indicator"
|
|
@@ -8,13 +8,13 @@ const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disab
|
|
|
8
8
|
}, Z = {
|
|
9
9
|
key: 0,
|
|
10
10
|
class: "status-indicator changed-indicator"
|
|
11
|
-
},
|
|
11
|
+
}, x = {
|
|
12
12
|
key: 4,
|
|
13
13
|
class: "error-message"
|
|
14
|
-
},
|
|
14
|
+
}, J = {
|
|
15
15
|
key: 5,
|
|
16
16
|
class: "message success-message"
|
|
17
|
-
},
|
|
17
|
+
}, Q = /* @__PURE__ */ D({
|
|
18
18
|
__name: "TextInput",
|
|
19
19
|
props: {
|
|
20
20
|
modelValue: {},
|
|
@@ -37,39 +37,39 @@ const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disab
|
|
|
37
37
|
height: {}
|
|
38
38
|
},
|
|
39
39
|
emits: ["update:modelValue", "changed", "saved"],
|
|
40
|
-
setup(
|
|
41
|
-
const r =
|
|
40
|
+
setup(n, { emit: y }) {
|
|
41
|
+
const r = n, c = y, v = V(() => `input-${Math.random().toString(36).substr(2, 9)}`), l = p(!1), m = p(!1), b = p(!1), u = p(null), f = p(null), _ = p(null), T = V(() => r.label ? r.labelPosition === "left" && r.labelWidth ? {
|
|
42
42
|
"grid-template-columns": `${r.labelWidth} 1fr`
|
|
43
|
-
} : {} : {}),
|
|
43
|
+
} : {} : {}), S = async (e) => {
|
|
44
44
|
if (r.autosave)
|
|
45
45
|
try {
|
|
46
|
-
await r.autosave(e), r.error || (
|
|
47
|
-
|
|
46
|
+
await r.autosave(e), r.error || (c("saved"), l.value = !0, m.value = !1, setTimeout(() => {
|
|
47
|
+
l.value = !1;
|
|
48
48
|
}, 3e3));
|
|
49
|
-
} catch (
|
|
50
|
-
console.error("Autosave failed:",
|
|
49
|
+
} catch (w) {
|
|
50
|
+
console.error("Autosave failed:", w);
|
|
51
51
|
}
|
|
52
|
-
},
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}, 500),
|
|
56
|
-
|
|
52
|
+
}, U = (e) => {
|
|
53
|
+
u.value && clearTimeout(u.value), f.value && clearTimeout(f.value), r.error || (m.value = !0), f.value = window.setTimeout(() => {
|
|
54
|
+
c("changed"), b.value = !0;
|
|
55
|
+
}, 500), u.value = window.setTimeout(() => {
|
|
56
|
+
S(e);
|
|
57
57
|
}, 1500);
|
|
58
|
-
},
|
|
58
|
+
}, B = () => {
|
|
59
59
|
var e;
|
|
60
|
-
(e =
|
|
61
|
-
},
|
|
60
|
+
(e = _.value) == null || e.focus();
|
|
61
|
+
}, C = (e) => {
|
|
62
62
|
e.style.height = "auto", e.style.height = `${e.scrollHeight}px`;
|
|
63
|
-
},
|
|
64
|
-
const
|
|
65
|
-
|
|
63
|
+
}, q = (e) => {
|
|
64
|
+
const w = e.target.value;
|
|
65
|
+
c("update:modelValue", w), U(w), C(e.target);
|
|
66
66
|
};
|
|
67
|
-
return
|
|
68
|
-
|
|
69
|
-
}), (e,
|
|
70
|
-
const
|
|
67
|
+
return W(() => {
|
|
68
|
+
u.value && clearTimeout(u.value), f.value && clearTimeout(f.value);
|
|
69
|
+
}), (e, w) => {
|
|
70
|
+
const t = z("font-awesome-icon");
|
|
71
71
|
return o(), s("div", {
|
|
72
|
-
class:
|
|
72
|
+
class: k(["text-input", {
|
|
73
73
|
[`label-${e.labelPosition}`]: e.label,
|
|
74
74
|
[`label-align-${e.labelAlign}`]: e.label
|
|
75
75
|
}]),
|
|
@@ -84,11 +84,11 @@ const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disab
|
|
|
84
84
|
}, [
|
|
85
85
|
e.label ? (o(), s("label", {
|
|
86
86
|
key: 0,
|
|
87
|
-
for:
|
|
87
|
+
for: v.value,
|
|
88
88
|
class: "label"
|
|
89
|
-
},
|
|
90
|
-
|
|
91
|
-
class:
|
|
89
|
+
}, h(e.label), 9, O)) : d("", !0),
|
|
90
|
+
g("div", {
|
|
91
|
+
class: k(["input-wrapper", {
|
|
92
92
|
"has-error": e.error,
|
|
93
93
|
"has-icon": e.icon
|
|
94
94
|
}])
|
|
@@ -96,200 +96,264 @@ const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disab
|
|
|
96
96
|
e.icon ? (o(), s("div", {
|
|
97
97
|
key: 0,
|
|
98
98
|
class: "icon-wrapper",
|
|
99
|
-
onClick:
|
|
99
|
+
onClick: B
|
|
100
100
|
}, [
|
|
101
|
-
|
|
101
|
+
F(t, {
|
|
102
102
|
icon: e.icon,
|
|
103
103
|
class: "icon"
|
|
104
104
|
}, null, 8, ["icon"])
|
|
105
|
-
])) :
|
|
105
|
+
])) : d("", !0),
|
|
106
106
|
e.isTextarea ? (o(), s("textarea", {
|
|
107
107
|
key: 2,
|
|
108
|
-
id:
|
|
108
|
+
id: v.value,
|
|
109
109
|
value: e.modelValue,
|
|
110
110
|
placeholder: e.placeholder,
|
|
111
111
|
required: e.required,
|
|
112
112
|
disabled: e.disabled,
|
|
113
113
|
class: "input",
|
|
114
|
-
onInput:
|
|
114
|
+
onInput: q,
|
|
115
115
|
ref_key: "inputRef",
|
|
116
|
-
ref:
|
|
116
|
+
ref: _
|
|
117
117
|
}, null, 40, j)) : (o(), s("input", {
|
|
118
118
|
key: 1,
|
|
119
|
-
id:
|
|
119
|
+
id: v.value,
|
|
120
120
|
type: e.type,
|
|
121
121
|
value: e.modelValue,
|
|
122
122
|
placeholder: e.placeholder,
|
|
123
123
|
required: e.required,
|
|
124
124
|
disabled: e.disabled,
|
|
125
125
|
class: "input",
|
|
126
|
-
onInput:
|
|
126
|
+
onInput: q,
|
|
127
127
|
ref_key: "inputRef",
|
|
128
|
-
ref:
|
|
128
|
+
ref: _
|
|
129
129
|
}, null, 40, X)),
|
|
130
|
-
e.required && !
|
|
131
|
-
|
|
132
|
-
default:
|
|
133
|
-
|
|
130
|
+
e.required && !l.value && !m.value ? (o(), s("span", G, "required")) : d("", !0),
|
|
131
|
+
F(M, { name: "fade" }, {
|
|
132
|
+
default: A(() => [
|
|
133
|
+
l.value && !e.error ? (o(), s("span", K, "saved")) : d("", !0)
|
|
134
134
|
]),
|
|
135
135
|
_: 1
|
|
136
136
|
}),
|
|
137
|
-
|
|
138
|
-
default:
|
|
139
|
-
|
|
137
|
+
F(M, { name: "fade" }, {
|
|
138
|
+
default: A(() => [
|
|
139
|
+
m.value && !e.error ? (o(), s("span", Z, "changed")) : d("", !0)
|
|
140
140
|
]),
|
|
141
141
|
_: 1
|
|
142
142
|
}),
|
|
143
|
-
e.error ? (o(), s("div",
|
|
144
|
-
e.success ? (o(), s("span",
|
|
143
|
+
e.error ? (o(), s("div", x, h(e.error), 1)) : d("", !0),
|
|
144
|
+
e.success ? (o(), s("span", J, h(e.success), 1)) : d("", !0)
|
|
145
145
|
], 2)
|
|
146
146
|
], 6);
|
|
147
147
|
};
|
|
148
148
|
}
|
|
149
|
-
}),
|
|
150
|
-
const r =
|
|
151
|
-
for (const [
|
|
152
|
-
r[
|
|
149
|
+
}), E = (n, y) => {
|
|
150
|
+
const r = n.__vccOpts || n;
|
|
151
|
+
for (const [c, v] of y)
|
|
152
|
+
r[c] = v;
|
|
153
153
|
return r;
|
|
154
|
-
},
|
|
154
|
+
}, fe = /* @__PURE__ */ E(Q, [["__scopeId", "data-v-cc2497d0"]]), Y = { class: "text-area-input" }, ee = ["value", "placeholder", "disabled", "required", "maxlength", "rows"], ae = {
|
|
155
|
+
key: 1,
|
|
156
|
+
class: "error-message"
|
|
157
|
+
}, te = /* @__PURE__ */ D({
|
|
158
|
+
__name: "TextAreaInput",
|
|
159
|
+
props: {
|
|
160
|
+
modelValue: {
|
|
161
|
+
type: String,
|
|
162
|
+
required: !0
|
|
163
|
+
},
|
|
164
|
+
label: {
|
|
165
|
+
type: String,
|
|
166
|
+
default: ""
|
|
167
|
+
},
|
|
168
|
+
placeholder: {
|
|
169
|
+
type: String,
|
|
170
|
+
default: ""
|
|
171
|
+
},
|
|
172
|
+
error: {
|
|
173
|
+
type: String,
|
|
174
|
+
default: ""
|
|
175
|
+
},
|
|
176
|
+
disabled: {
|
|
177
|
+
type: Boolean,
|
|
178
|
+
default: !1
|
|
179
|
+
},
|
|
180
|
+
required: {
|
|
181
|
+
type: Boolean,
|
|
182
|
+
default: !1
|
|
183
|
+
},
|
|
184
|
+
maxlength: {
|
|
185
|
+
type: Number,
|
|
186
|
+
default: void 0
|
|
187
|
+
},
|
|
188
|
+
rows: {
|
|
189
|
+
type: Number,
|
|
190
|
+
default: 4
|
|
191
|
+
}
|
|
192
|
+
},
|
|
193
|
+
emits: ["update:modelValue"],
|
|
194
|
+
setup(n, { emit: y }) {
|
|
195
|
+
const r = y, c = (v) => {
|
|
196
|
+
const l = v.target;
|
|
197
|
+
r("update:modelValue", l.value);
|
|
198
|
+
};
|
|
199
|
+
return (v, l) => (o(), s("div", Y, [
|
|
200
|
+
n.label ? (o(), s("label", {
|
|
201
|
+
key: 0,
|
|
202
|
+
class: k({ required: n.required })
|
|
203
|
+
}, h(n.label), 3)) : d("", !0),
|
|
204
|
+
g("textarea", {
|
|
205
|
+
value: n.modelValue,
|
|
206
|
+
onInput: c,
|
|
207
|
+
placeholder: n.placeholder,
|
|
208
|
+
disabled: n.disabled,
|
|
209
|
+
required: n.required,
|
|
210
|
+
maxlength: n.maxlength,
|
|
211
|
+
rows: n.rows,
|
|
212
|
+
class: k({ error: !!n.error })
|
|
213
|
+
}, null, 42, ee),
|
|
214
|
+
n.error ? (o(), s("div", ae, h(n.error), 1)) : d("", !0)
|
|
215
|
+
]));
|
|
216
|
+
}
|
|
217
|
+
}), he = /* @__PURE__ */ E(te, [["__scopeId", "data-v-2e843729"]]), le = { class: "file-upload" }, se = { class: "upload-content" }, oe = { key: 0 }, re = {
|
|
155
218
|
key: 1,
|
|
156
219
|
class: "selected-files"
|
|
157
|
-
},
|
|
220
|
+
}, ne = { class: "file-name" }, ie = { class: "file-size" }, ue = {
|
|
158
221
|
key: 0,
|
|
159
222
|
class: "error-message"
|
|
160
|
-
},
|
|
223
|
+
}, de = {
|
|
161
224
|
key: 1,
|
|
162
225
|
class: "progress-bar"
|
|
163
|
-
},
|
|
226
|
+
}, ce = 20 * 1024 * 1024, pe = /* @__PURE__ */ D({
|
|
164
227
|
__name: "FileUpload",
|
|
165
228
|
props: {
|
|
166
229
|
icon: {},
|
|
167
230
|
uploadUrl: {}
|
|
168
231
|
},
|
|
169
232
|
emits: ["upload-complete", "upload-error", "files-selected", "start-upload"],
|
|
170
|
-
setup(
|
|
171
|
-
const r =
|
|
172
|
-
if (
|
|
173
|
-
const a = 1024,
|
|
174
|
-
return parseFloat((
|
|
175
|
-
}, T = (
|
|
176
|
-
|
|
177
|
-
},
|
|
178
|
-
|
|
179
|
-
},
|
|
233
|
+
setup(n, { emit: y }) {
|
|
234
|
+
const r = n, c = y, v = p(null), l = p([]), m = p(!1), b = p(0), u = p(""), f = p(null), _ = (t) => {
|
|
235
|
+
if (t === 0) return "0 Bytes";
|
|
236
|
+
const a = 1024, i = ["Bytes", "KB", "MB", "GB"], $ = Math.floor(Math.log(t) / Math.log(a));
|
|
237
|
+
return parseFloat((t / Math.pow(a, $)).toFixed(2)) + " " + i[$];
|
|
238
|
+
}, T = (t) => t.size > ce ? (u.value = `File "${t.name}" exceeds the maximum size of 20MB`, !1) : !0, S = () => {
|
|
239
|
+
m.value = !0;
|
|
240
|
+
}, U = () => {
|
|
241
|
+
m.value = !1;
|
|
242
|
+
}, B = (t) => {
|
|
180
243
|
var a;
|
|
181
|
-
if (
|
|
182
|
-
const
|
|
183
|
-
|
|
244
|
+
if (m.value = !1, u.value = "", (a = t.dataTransfer) != null && a.files) {
|
|
245
|
+
const i = Array.from(t.dataTransfer.files);
|
|
246
|
+
i.every(T) && (l.value = [...l.value, ...i]);
|
|
184
247
|
}
|
|
185
|
-
},
|
|
186
|
-
var
|
|
187
|
-
(
|
|
188
|
-
},
|
|
189
|
-
|
|
190
|
-
const a =
|
|
248
|
+
}, C = () => {
|
|
249
|
+
var t;
|
|
250
|
+
(t = v.value) == null || t.click();
|
|
251
|
+
}, q = (t) => {
|
|
252
|
+
u.value = "";
|
|
253
|
+
const a = t.target;
|
|
191
254
|
if (a.files) {
|
|
192
|
-
const
|
|
193
|
-
|
|
255
|
+
const i = Array.from(a.files);
|
|
256
|
+
i.every(T) && (l.value = [...l.value, ...i]);
|
|
194
257
|
}
|
|
195
258
|
a.value = "";
|
|
196
259
|
}, e = async () => {
|
|
197
260
|
if (!r.uploadUrl) {
|
|
198
|
-
|
|
261
|
+
u.value = "No upload URL provided";
|
|
199
262
|
return;
|
|
200
263
|
}
|
|
201
|
-
if (
|
|
202
|
-
|
|
264
|
+
if (l.value.length === 0) {
|
|
265
|
+
u.value = "No files selected";
|
|
203
266
|
return;
|
|
204
267
|
}
|
|
205
|
-
const
|
|
206
|
-
|
|
207
|
-
|
|
268
|
+
const t = new FormData();
|
|
269
|
+
l.value.forEach((a) => {
|
|
270
|
+
t.append("files", a);
|
|
208
271
|
});
|
|
209
272
|
try {
|
|
210
273
|
const a = new XMLHttpRequest();
|
|
211
|
-
a.upload.addEventListener("progress", (
|
|
212
|
-
|
|
274
|
+
a.upload.addEventListener("progress", (i) => {
|
|
275
|
+
i.lengthComputable && (b.value = i.loaded / i.total * 100);
|
|
213
276
|
}), a.addEventListener("load", () => {
|
|
214
277
|
if (a.status >= 200 && a.status < 300)
|
|
215
|
-
|
|
278
|
+
f.value = {
|
|
216
279
|
type: "success",
|
|
217
280
|
message: "Upload completed successfully"
|
|
218
|
-
},
|
|
281
|
+
}, c("upload-complete", l.value), l.value = [], b.value = 0;
|
|
219
282
|
else
|
|
220
283
|
throw new Error(`Upload failed with status ${a.status}`);
|
|
221
284
|
}), a.addEventListener("error", () => {
|
|
222
285
|
throw new Error("Upload failed");
|
|
223
|
-
}), a.open("POST", r.uploadUrl), a.send(
|
|
286
|
+
}), a.open("POST", r.uploadUrl), a.send(t);
|
|
224
287
|
} catch (a) {
|
|
225
|
-
const
|
|
226
|
-
|
|
288
|
+
const i = a instanceof Error ? a.message : "Upload failed";
|
|
289
|
+
u.value = i, f.value = {
|
|
227
290
|
type: "error",
|
|
228
|
-
message:
|
|
229
|
-
},
|
|
291
|
+
message: i
|
|
292
|
+
}, c("upload-error", i);
|
|
230
293
|
}
|
|
231
|
-
},
|
|
232
|
-
|
|
294
|
+
}, w = () => {
|
|
295
|
+
c("start-upload", l.value);
|
|
233
296
|
};
|
|
234
|
-
return
|
|
235
|
-
|
|
236
|
-
}), (
|
|
237
|
-
const
|
|
238
|
-
return o(), s("div",
|
|
239
|
-
|
|
240
|
-
class:
|
|
241
|
-
onDragenter:
|
|
242
|
-
onDragleave:
|
|
243
|
-
onDragover: a[0] || (a[0] =
|
|
297
|
+
return H(l, (t) => {
|
|
298
|
+
t.length > 0 && (r.uploadUrl ? e() : c("files-selected", t));
|
|
299
|
+
}), (t, a) => {
|
|
300
|
+
const i = z("font-awesome-icon");
|
|
301
|
+
return o(), s("div", le, [
|
|
302
|
+
g("div", {
|
|
303
|
+
class: k(["upload-area", { "is-dragging": m.value, "has-files": l.value.length > 0 }]),
|
|
304
|
+
onDragenter: I(S, ["prevent"]),
|
|
305
|
+
onDragleave: I(U, ["prevent"]),
|
|
306
|
+
onDragover: a[0] || (a[0] = I(() => {
|
|
244
307
|
}, ["prevent"])),
|
|
245
|
-
onDrop:
|
|
246
|
-
onClick:
|
|
308
|
+
onDrop: I(B, ["prevent"]),
|
|
309
|
+
onClick: C
|
|
247
310
|
}, [
|
|
248
|
-
|
|
311
|
+
g("input", {
|
|
249
312
|
ref_key: "fileInput",
|
|
250
|
-
ref:
|
|
313
|
+
ref: v,
|
|
251
314
|
type: "file",
|
|
252
315
|
multiple: "",
|
|
253
316
|
class: "file-input",
|
|
254
|
-
onChange:
|
|
317
|
+
onChange: q
|
|
255
318
|
}, null, 544),
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
icon: ["fas",
|
|
319
|
+
g("div", se, [
|
|
320
|
+
F(i, {
|
|
321
|
+
icon: ["fas", t.icon || "upload"]
|
|
259
322
|
}, null, 8, ["icon"]),
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
(o(!0), s(P, null, R(
|
|
263
|
-
key:
|
|
323
|
+
l.value.length === 0 ? (o(), s("p", oe, "Drag & drop files here or click to select")) : (o(), s("div", re, [
|
|
324
|
+
g("p", null, h(l.value.length) + " file(s) selected", 1),
|
|
325
|
+
(o(!0), s(P, null, R(l.value, ($, N) => (o(), s("div", {
|
|
326
|
+
key: N,
|
|
264
327
|
class: "file-info"
|
|
265
328
|
}, [
|
|
266
|
-
|
|
267
|
-
|
|
329
|
+
g("span", ne, h($.name), 1),
|
|
330
|
+
g("span", ie, h(_($.size)), 1)
|
|
268
331
|
]))), 128))
|
|
269
332
|
]))
|
|
270
333
|
])
|
|
271
334
|
], 34),
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
335
|
+
u.value ? (o(), s("div", ue, h(u.value), 1)) : d("", !0),
|
|
336
|
+
b.value > 0 && b.value < 100 ? (o(), s("div", de, [
|
|
337
|
+
g("div", {
|
|
275
338
|
class: "progress",
|
|
276
|
-
style: L({ width: `${
|
|
339
|
+
style: L({ width: `${b.value}%` })
|
|
277
340
|
}, null, 4)
|
|
278
|
-
])) :
|
|
279
|
-
|
|
341
|
+
])) : d("", !0),
|
|
342
|
+
f.value ? (o(), s("div", {
|
|
280
343
|
key: 2,
|
|
281
|
-
class:
|
|
282
|
-
},
|
|
283
|
-
|
|
344
|
+
class: k(["status-message", f.value.type])
|
|
345
|
+
}, h(f.value.message), 3)) : d("", !0),
|
|
346
|
+
l.value.length > 0 && !t.uploadUrl ? (o(), s("button", {
|
|
284
347
|
key: 3,
|
|
285
348
|
class: "upload-button",
|
|
286
|
-
onClick:
|
|
287
|
-
}, " Upload Files ")) :
|
|
349
|
+
onClick: w
|
|
350
|
+
}, " Upload Files ")) : d("", !0)
|
|
288
351
|
]);
|
|
289
352
|
};
|
|
290
353
|
}
|
|
291
|
-
}),
|
|
354
|
+
}), me = /* @__PURE__ */ E(pe, [["__scopeId", "data-v-75b2aeea"]]);
|
|
292
355
|
export {
|
|
293
|
-
|
|
294
|
-
|
|
356
|
+
me as FileUpload,
|
|
357
|
+
he as TextAreaInput,
|
|
358
|
+
fe as TextInput
|
|
295
359
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.VueInputComponents={},u.Vue))})(this,function(u,e){"use strict";const N=["for"],S=["id","type","value","placeholder","required","disabled"],T=["id","value","placeholder","required","disabled"],$={key:3,class:"status-indicator required-indicator"},D={key:0,class:"status-indicator saved-indicator"},I={key:0,class:"status-indicator changed-indicator"},q={key:4,class:"error-message"},F={key:5,class:"message success-message"},U=e.defineComponent({__name:"TextInput",props:{modelValue:{},label:{},type:{},icon:{},placeholder:{},required:{type:Boolean},disabled:{type:Boolean},error:{},success:{},labelPosition:{},labelAlign:{},totalWidth:{},inputWidth:{},labelWidth:{},autosave:{type:Function},isTextarea:{type:Boolean},maxHeight:{},height:{}},emits:["update:modelValue","changed","saved"],setup(r,{emit:f}){const n=r,c=f,d=e.computed(()=>`input-${Math.random().toString(36).substr(2,9)}`),o=e.ref(!1),m=e.ref(!1),h=e.ref(!1),i=e.ref(null),p=e.ref(null),k=e.ref(null),B=e.computed(()=>n.label?n.labelPosition==="left"&&n.labelWidth?{"grid-template-columns":`${n.labelWidth} 1fr`}:{}:{}),V=async t=>{if(n.autosave)try{await n.autosave(t),n.error||(c("saved"),o.value=!0,m.value=!1,setTimeout(()=>{o.value=!1},3e3))}catch(g){console.error("Autosave failed:",g)}},w=t=>{i.value&&clearTimeout(i.value),p.value&&clearTimeout(p.value),n.error||(m.value=!0),p.value=window.setTimeout(()=>{c("changed"),h.value=!0},500),i.value=window.setTimeout(()=>{V(t)},1500)},C=()=>{var t;(t=k.value)==null||t.focus()},_=t=>{t.style.height="auto",t.style.height=`${t.scrollHeight}px`},b=t=>{const g=t.target.value;c("update:modelValue",g),w(g),_(t.target)};return e.onUnmounted(()=>{i.value&&clearTimeout(i.value),p.value&&clearTimeout(p.value)}),(t,g)=>{const a=e.resolveComponent("font-awesome-icon");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["text-input",{[`label-${t.labelPosition}`]:t.label,[`label-align-${t.labelAlign}`]:t.label}]),style:e.normalizeStyle([{width:t.totalWidth||"100%"},B.value,{"--max-textarea-height":n.maxHeight||n.height||"14rem","--textarea-height":n.height||"5.5rem"}])},[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:d.value,class:"label"},e.toDisplayString(t.label),9,N)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["input-wrapper",{"has-error":t.error,"has-icon":t.icon}])},[t.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"icon-wrapper",onClick:C},[e.createVNode(a,{icon:t.icon,class:"icon"},null,8,["icon"])])):e.createCommentVNode("",!0),t.isTextarea?(e.openBlock(),e.createElementBlock("textarea",{key:2,id:d.value,value:t.modelValue,placeholder:t.placeholder,required:t.required,disabled:t.disabled,class:"input",onInput:b,ref_key:"inputRef",ref:k},null,40,T)):(e.openBlock(),e.createElementBlock("input",{key:1,id:d.value,type:t.type,value:t.modelValue,placeholder:t.placeholder,required:t.required,disabled:t.disabled,class:"input",onInput:b,ref_key:"inputRef",ref:k},null,40,S)),t.required&&!o.value&&!m.value?(e.openBlock(),e.createElementBlock("span",$,"required")):e.createCommentVNode("",!0),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[o.value&&!t.error?(e.openBlock(),e.createElementBlock("span",D,"saved")):e.createCommentVNode("",!0)]),_:1}),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[m.value&&!t.error?(e.openBlock(),e.createElementBlock("span",I,"changed")):e.createCommentVNode("",!0)]),_:1}),t.error?(e.openBlock(),e.createElementBlock("div",q,e.toDisplayString(t.error),1)):e.createCommentVNode("",!0),t.success?(e.openBlock(),e.createElementBlock("span",F,e.toDisplayString(t.success),1)):e.createCommentVNode("",!0)],2)],6)}}}),E=(r,f)=>{const n=r.__vccOpts||r;for(const[c,d]of f)n[c]=d;return n},z=E(U,[["__scopeId","data-v-cc2497d0"]]),M={class:"text-area-input"},A=["value","placeholder","disabled","required","maxlength","rows"],L={key:1,class:"error-message"},P=E(e.defineComponent({__name:"TextAreaInput",props:{modelValue:{type:String,required:!0},label:{type:String,default:""},placeholder:{type:String,default:""},error:{type:String,default:""},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},maxlength:{type:Number,default:void 0},rows:{type:Number,default:4}},emits:["update:modelValue"],setup(r,{emit:f}){const n=f,c=d=>{const o=d.target;n("update:modelValue",o.value)};return(d,o)=>(e.openBlock(),e.createElementBlock("div",M,[r.label?(e.openBlock(),e.createElementBlock("label",{key:0,class:e.normalizeClass({required:r.required})},e.toDisplayString(r.label),3)):e.createCommentVNode("",!0),e.createElementVNode("textarea",{value:r.modelValue,onInput:c,placeholder:r.placeholder,disabled:r.disabled,required:r.required,maxlength:r.maxlength,rows:r.rows,class:e.normalizeClass({error:!!r.error})},null,42,A),r.error?(e.openBlock(),e.createElementBlock("div",L,e.toDisplayString(r.error),1)):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-2e843729"]]),W={class:"file-upload"},H={class:"upload-content"},R={key:0},j={key:1,class:"selected-files"},v={class:"file-name"},O={class:"file-size"},x={key:0,class:"error-message"},X={key:1,class:"progress-bar"},G=20*1024*1024,K=E(e.defineComponent({__name:"FileUpload",props:{icon:{},uploadUrl:{}},emits:["upload-complete","upload-error","files-selected","start-upload"],setup(r,{emit:f}){const n=r,c=f,d=e.ref(null),o=e.ref([]),m=e.ref(!1),h=e.ref(0),i=e.ref(""),p=e.ref(null),k=a=>{if(a===0)return"0 Bytes";const l=1024,s=["Bytes","KB","MB","GB"],y=Math.floor(Math.log(a)/Math.log(l));return parseFloat((a/Math.pow(l,y)).toFixed(2))+" "+s[y]},B=a=>a.size>G?(i.value=`File "${a.name}" exceeds the maximum size of 20MB`,!1):!0,V=()=>{m.value=!0},w=()=>{m.value=!1},C=a=>{var l;if(m.value=!1,i.value="",(l=a.dataTransfer)!=null&&l.files){const s=Array.from(a.dataTransfer.files);s.every(B)&&(o.value=[...o.value,...s])}},_=()=>{var a;(a=d.value)==null||a.click()},b=a=>{i.value="";const l=a.target;if(l.files){const s=Array.from(l.files);s.every(B)&&(o.value=[...o.value,...s])}l.value=""},t=async()=>{if(!n.uploadUrl){i.value="No upload URL provided";return}if(o.value.length===0){i.value="No files selected";return}const a=new FormData;o.value.forEach(l=>{a.append("files",l)});try{const l=new XMLHttpRequest;l.upload.addEventListener("progress",s=>{s.lengthComputable&&(h.value=s.loaded/s.total*100)}),l.addEventListener("load",()=>{if(l.status>=200&&l.status<300)p.value={type:"success",message:"Upload completed successfully"},c("upload-complete",o.value),o.value=[],h.value=0;else throw new Error(`Upload failed with status ${l.status}`)}),l.addEventListener("error",()=>{throw new Error("Upload failed")}),l.open("POST",n.uploadUrl),l.send(a)}catch(l){const s=l instanceof Error?l.message:"Upload failed";i.value=s,p.value={type:"error",message:s},c("upload-error",s)}},g=()=>{c("start-upload",o.value)};return e.watch(o,a=>{a.length>0&&(n.uploadUrl?t():c("files-selected",a))}),(a,l)=>{const s=e.resolveComponent("font-awesome-icon");return e.openBlock(),e.createElementBlock("div",W,[e.createElementVNode("div",{class:e.normalizeClass(["upload-area",{"is-dragging":m.value,"has-files":o.value.length>0}]),onDragenter:e.withModifiers(V,["prevent"]),onDragleave:e.withModifiers(w,["prevent"]),onDragover:l[0]||(l[0]=e.withModifiers(()=>{},["prevent"])),onDrop:e.withModifiers(C,["prevent"]),onClick:_},[e.createElementVNode("input",{ref_key:"fileInput",ref:d,type:"file",multiple:"",class:"file-input",onChange:b},null,544),e.createElementVNode("div",H,[e.createVNode(s,{icon:["fas",a.icon||"upload"]},null,8,["icon"]),o.value.length===0?(e.openBlock(),e.createElementBlock("p",R,"Drag & drop files here or click to select")):(e.openBlock(),e.createElementBlock("div",j,[e.createElementVNode("p",null,e.toDisplayString(o.value.length)+" file(s) selected",1),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,(y,Z)=>(e.openBlock(),e.createElementBlock("div",{key:Z,class:"file-info"},[e.createElementVNode("span",v,e.toDisplayString(y.name),1),e.createElementVNode("span",O,e.toDisplayString(k(y.size)),1)]))),128))]))])],34),i.value?(e.openBlock(),e.createElementBlock("div",x,e.toDisplayString(i.value),1)):e.createCommentVNode("",!0),h.value>0&&h.value<100?(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("div",{class:"progress",style:e.normalizeStyle({width:`${h.value}%`})},null,4)])):e.createCommentVNode("",!0),p.value?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["status-message",p.value.type])},e.toDisplayString(p.value.message),3)):e.createCommentVNode("",!0),o.value.length>0&&!a.uploadUrl?(e.openBlock(),e.createElementBlock("button",{key:3,class:"upload-button",onClick:g}," Upload Files ")):e.createCommentVNode("",!0)])}}}),[["__scopeId","data-v-75b2aeea"]]);u.FileUpload=K,u.TextAreaInput=P,u.TextInput=z,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="text-area-input">
|
|
3
|
+
<label v-if="label" :class="{ required }">{{ label }}</label>
|
|
4
|
+
<textarea
|
|
5
|
+
:value="modelValue"
|
|
6
|
+
@input="handleInput"
|
|
7
|
+
:placeholder="placeholder"
|
|
8
|
+
:disabled="disabled"
|
|
9
|
+
:required="required"
|
|
10
|
+
:maxlength="maxlength"
|
|
11
|
+
:rows="rows"
|
|
12
|
+
:class="{ error: !!error }"
|
|
13
|
+
></textarea>
|
|
14
|
+
<div v-if="error" class="error-message">{{ error }}</div>
|
|
15
|
+
</div>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<script setup lang="ts">
|
|
19
|
+
import { defineProps, defineEmits } from 'vue'
|
|
20
|
+
|
|
21
|
+
defineProps({
|
|
22
|
+
modelValue: {
|
|
23
|
+
type: String,
|
|
24
|
+
required: true,
|
|
25
|
+
},
|
|
26
|
+
label: {
|
|
27
|
+
type: String,
|
|
28
|
+
default: '',
|
|
29
|
+
},
|
|
30
|
+
placeholder: {
|
|
31
|
+
type: String,
|
|
32
|
+
default: '',
|
|
33
|
+
},
|
|
34
|
+
error: {
|
|
35
|
+
type: String,
|
|
36
|
+
default: '',
|
|
37
|
+
},
|
|
38
|
+
disabled: {
|
|
39
|
+
type: Boolean,
|
|
40
|
+
default: false,
|
|
41
|
+
},
|
|
42
|
+
required: {
|
|
43
|
+
type: Boolean,
|
|
44
|
+
default: false,
|
|
45
|
+
},
|
|
46
|
+
maxlength: {
|
|
47
|
+
type: Number,
|
|
48
|
+
default: undefined,
|
|
49
|
+
},
|
|
50
|
+
rows: {
|
|
51
|
+
type: Number,
|
|
52
|
+
default: 4,
|
|
53
|
+
},
|
|
54
|
+
})
|
|
55
|
+
|
|
56
|
+
const emit = defineEmits(['update:modelValue'])
|
|
57
|
+
|
|
58
|
+
const handleInput = (event: Event) => {
|
|
59
|
+
const target = event.target as HTMLTextAreaElement
|
|
60
|
+
emit('update:modelValue', target.value)
|
|
61
|
+
}
|
|
62
|
+
</script>
|
|
63
|
+
|
|
64
|
+
<style scoped>
|
|
65
|
+
.text-area-input {
|
|
66
|
+
display: flex;
|
|
67
|
+
flex-direction: column;
|
|
68
|
+
gap: 0.5rem;
|
|
69
|
+
width: 100%;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
label {
|
|
73
|
+
font-size: 0.875rem;
|
|
74
|
+
font-weight: 500;
|
|
75
|
+
color: var(--text-color);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
label.required::after {
|
|
79
|
+
content: '*';
|
|
80
|
+
color: var(--error-color);
|
|
81
|
+
margin-left: 0.25rem;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
textarea {
|
|
85
|
+
width: 100%;
|
|
86
|
+
padding: 0.5rem;
|
|
87
|
+
border: 1px solid var(--border-color);
|
|
88
|
+
border-radius: 0.375rem;
|
|
89
|
+
font-size: 0.875rem;
|
|
90
|
+
line-height: 1.5;
|
|
91
|
+
color: var(--text-color);
|
|
92
|
+
background-color: var(--bg-color);
|
|
93
|
+
transition: border-color 0.2s ease-in-out;
|
|
94
|
+
resize: vertical;
|
|
95
|
+
min-height: 2.5rem;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
textarea:focus {
|
|
99
|
+
outline: none;
|
|
100
|
+
border-color: var(--primary-color);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
textarea:disabled {
|
|
104
|
+
background-color: var(--disabled-bg-color);
|
|
105
|
+
cursor: not-allowed;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
textarea.error {
|
|
109
|
+
border-color: var(--error-color);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.error-message {
|
|
113
|
+
font-size: 0.75rem;
|
|
114
|
+
color: var(--error-color);
|
|
115
|
+
}
|
|
116
|
+
</style>
|
package/src/index.ts
CHANGED
|
@@ -1,2 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import TextInput from './components/TextInput.vue'
|
|
2
|
+
import TextAreaInput from './components/TextAreaInput.vue'
|
|
3
|
+
import FileUpload from './components/FileUpload.vue'
|
|
4
|
+
|
|
5
|
+
export { TextInput, TextAreaInput, FileUpload }
|
|
6
|
+
|
|
7
|
+
// Export types
|
|
8
|
+
export * from './types'
|
package/src/types.ts
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import type { Component } from 'vue'
|
|
2
|
+
|
|
3
|
+
export interface TextInputProps {
|
|
4
|
+
modelValue: string
|
|
5
|
+
label?: string
|
|
6
|
+
placeholder?: string
|
|
7
|
+
error?: string
|
|
8
|
+
disabled?: boolean
|
|
9
|
+
required?: boolean
|
|
10
|
+
maxlength?: number
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export interface TextAreaInputProps {
|
|
14
|
+
modelValue: string
|
|
15
|
+
label?: string
|
|
16
|
+
placeholder?: string
|
|
17
|
+
error?: string
|
|
18
|
+
disabled?: boolean
|
|
19
|
+
required?: boolean
|
|
20
|
+
maxlength?: number
|
|
21
|
+
rows?: number
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export interface FileUploadProps {
|
|
25
|
+
modelValue: File[]
|
|
26
|
+
label?: string
|
|
27
|
+
placeholder?: string
|
|
28
|
+
error?: string
|
|
29
|
+
disabled?: boolean
|
|
30
|
+
required?: boolean
|
|
31
|
+
multiple?: boolean
|
|
32
|
+
accept?: string
|
|
33
|
+
maxSize?: number
|
|
34
|
+
uploadUrl?: string
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export interface FileUploadEmits {
|
|
38
|
+
(e: 'update:modelValue', files: File[]): void
|
|
39
|
+
(e: 'files-selected', files: File[]): void
|
|
40
|
+
(e: 'start-upload', files: File[]): void
|
|
41
|
+
(e: 'upload-progress', progress: number): void
|
|
42
|
+
(e: 'upload-success', response: any): void
|
|
43
|
+
(e: 'upload-error', error: Error): void
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export type TextInputComponent = Component<TextInputProps>
|
|
47
|
+
export type TextAreaInputComponent = Component<TextAreaInputProps>
|
|
48
|
+
export type FileUploadComponent = Component<FileUploadProps>
|
package/dist/index.d.ts
DELETED
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
import { ComponentOptionsMixin } from 'vue';
|
|
2
|
-
import { ComponentProvideOptions } from 'vue';
|
|
3
|
-
import { DefineComponent } from 'vue';
|
|
4
|
-
import { ExtractPropTypes } from 'vue';
|
|
5
|
-
import { PropType } from 'vue';
|
|
6
|
-
import { PublicProps } from 'vue';
|
|
7
|
-
|
|
8
|
-
declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
9
|
-
|
|
10
|
-
declare type __VLS_NonUndefinedable_2<T> = T extends undefined ? never : T;
|
|
11
|
-
|
|
12
|
-
declare type __VLS_TypePropsToRuntimeProps<T> = {
|
|
13
|
-
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
14
|
-
type: PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
15
|
-
} : {
|
|
16
|
-
type: PropType<T[K]>;
|
|
17
|
-
required: true;
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
declare type __VLS_TypePropsToRuntimeProps_2<T> = {
|
|
22
|
-
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
23
|
-
type: PropType<__VLS_NonUndefinedable_2<T[K]>>;
|
|
24
|
-
} : {
|
|
25
|
-
type: PropType<T[K]>;
|
|
26
|
-
required: true;
|
|
27
|
-
};
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
export declare const FileUpload: DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_2<{
|
|
31
|
-
icon?: string | undefined;
|
|
32
|
-
uploadUrl?: string | undefined;
|
|
33
|
-
}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
34
|
-
"upload-complete": (files: File[]) => void;
|
|
35
|
-
"upload-error": (error: string) => void;
|
|
36
|
-
"files-selected": (files: File[]) => void;
|
|
37
|
-
"start-upload": (files: File[]) => void;
|
|
38
|
-
}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_2<{
|
|
39
|
-
icon?: string | undefined;
|
|
40
|
-
uploadUrl?: string | undefined;
|
|
41
|
-
}>>> & Readonly<{
|
|
42
|
-
"onUpload-complete"?: ((files: File[]) => any) | undefined;
|
|
43
|
-
"onUpload-error"?: ((error: string) => any) | undefined;
|
|
44
|
-
"onFiles-selected"?: ((files: File[]) => any) | undefined;
|
|
45
|
-
"onStart-upload"?: ((files: File[]) => any) | undefined;
|
|
46
|
-
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
47
|
-
|
|
48
|
-
export declare const TextInput: DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
49
|
-
modelValue: string;
|
|
50
|
-
label?: string | undefined;
|
|
51
|
-
type?: string | undefined;
|
|
52
|
-
icon?: string | undefined;
|
|
53
|
-
placeholder?: string | undefined;
|
|
54
|
-
required?: boolean | undefined;
|
|
55
|
-
disabled?: boolean | undefined;
|
|
56
|
-
error?: string | undefined;
|
|
57
|
-
success?: string | undefined;
|
|
58
|
-
labelPosition?: "top" | "left" | undefined;
|
|
59
|
-
labelAlign?: "left" | "right" | "center" | undefined;
|
|
60
|
-
totalWidth?: string | undefined;
|
|
61
|
-
inputWidth?: string | undefined;
|
|
62
|
-
labelWidth?: string | undefined;
|
|
63
|
-
autosave?: ((value: string) => Promise<void>) | undefined;
|
|
64
|
-
isTextarea?: boolean | undefined;
|
|
65
|
-
maxHeight?: string | undefined;
|
|
66
|
-
height?: string | undefined;
|
|
67
|
-
}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
68
|
-
"update:modelValue": (value: string) => void;
|
|
69
|
-
changed: () => void;
|
|
70
|
-
saved: () => void;
|
|
71
|
-
}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
72
|
-
modelValue: string;
|
|
73
|
-
label?: string | undefined;
|
|
74
|
-
type?: string | undefined;
|
|
75
|
-
icon?: string | undefined;
|
|
76
|
-
placeholder?: string | undefined;
|
|
77
|
-
required?: boolean | undefined;
|
|
78
|
-
disabled?: boolean | undefined;
|
|
79
|
-
error?: string | undefined;
|
|
80
|
-
success?: string | undefined;
|
|
81
|
-
labelPosition?: "top" | "left" | undefined;
|
|
82
|
-
labelAlign?: "left" | "right" | "center" | undefined;
|
|
83
|
-
totalWidth?: string | undefined;
|
|
84
|
-
inputWidth?: string | undefined;
|
|
85
|
-
labelWidth?: string | undefined;
|
|
86
|
-
autosave?: ((value: string) => Promise<void>) | undefined;
|
|
87
|
-
isTextarea?: boolean | undefined;
|
|
88
|
-
maxHeight?: string | undefined;
|
|
89
|
-
height?: string | undefined;
|
|
90
|
-
}>>> & Readonly<{
|
|
91
|
-
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
92
|
-
onChanged?: (() => any) | undefined;
|
|
93
|
-
onSaved?: (() => any) | undefined;
|
|
94
|
-
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
95
|
-
|
|
96
|
-
export { }
|