@community-release/nx-ui 0.0.52 → 0.0.53
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/module.json
CHANGED
|
@@ -77,6 +77,10 @@
|
|
|
77
77
|
"drag-and-drop": "Or drag and drop file to upload."
|
|
78
78
|
};
|
|
79
79
|
}
|
|
80
|
+
},
|
|
81
|
+
multiple: {
|
|
82
|
+
type: Boolean,
|
|
83
|
+
default: false,
|
|
80
84
|
}
|
|
81
85
|
});
|
|
82
86
|
|
|
@@ -94,20 +98,18 @@
|
|
|
94
98
|
const { files, open: openFileDialogue, reset, onCancel, onChange: inputOnChange } = useFileDialog({
|
|
95
99
|
//accept: 'image/*', // Set to accept only image files
|
|
96
100
|
accept: allowedTypes, // Set to accept only image files
|
|
97
|
-
multiple:
|
|
101
|
+
multiple: props.multiple,
|
|
98
102
|
});
|
|
99
|
-
inputOnChange(e => {
|
|
103
|
+
inputOnChange(e => { handleInputUpdate(e); });
|
|
100
104
|
|
|
101
105
|
// Handle drag and drop zone
|
|
102
106
|
const refDropZone = ref();
|
|
103
107
|
const { isOverDropZone } = useDropZone(refDropZone, {
|
|
104
|
-
onDrop
|
|
105
|
-
filesList.value.push( ...createFileInputFiles(e) );
|
|
106
|
-
},
|
|
108
|
+
onDrop: handleInputUpdate,
|
|
107
109
|
// specify the types of data to be received.
|
|
108
110
|
dataTypes: allowedTypes,
|
|
109
111
|
// control multi-file drop
|
|
110
|
-
multiple:
|
|
112
|
+
multiple: props.multiple,
|
|
111
113
|
// whether to prevent default behavior for unhandled events
|
|
112
114
|
preventDefaultForUnhandled: false,
|
|
113
115
|
});
|
|
@@ -173,6 +175,13 @@
|
|
|
173
175
|
return ar.length ? ar.map(v => v.file) : [];
|
|
174
176
|
}
|
|
175
177
|
|
|
178
|
+
function handleInputUpdate(e) {
|
|
179
|
+
if (props.multiple)
|
|
180
|
+
filesList.value.push( ...createFileInputFiles(e) );
|
|
181
|
+
else
|
|
182
|
+
filesList.value = createFileInputFiles(e);
|
|
183
|
+
}
|
|
184
|
+
|
|
176
185
|
// Hooks
|
|
177
186
|
|
|
178
187
|
</script>
|
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
<div>
|
|
3
3
|
<div class="component-ui-label" :class="[`tag-size-${size}`, `tag-weight-${weight}`, required ? 'tag-required' : '']">
|
|
4
4
|
<component :is="isLegend ? 'legend' : 'label'" class="component-ui-label--text" :for="labelFor">
|
|
5
|
-
{{ text }} <span v-if="required" aria-hidden="true">*</span>
|
|
5
|
+
{{ text }} <span v-if="required" aria-hidden="true" class="required">*</span>
|
|
6
|
+
|
|
7
|
+
<span v-if="description" class="description" v-html="description"></span>
|
|
6
8
|
</component>
|
|
7
9
|
<slot />
|
|
8
10
|
</div>
|
|
@@ -18,6 +20,9 @@
|
|
|
18
20
|
text: {
|
|
19
21
|
default: '',
|
|
20
22
|
},
|
|
23
|
+
description: {
|
|
24
|
+
default: '',
|
|
25
|
+
},
|
|
21
26
|
fieldset: {
|
|
22
27
|
type: Boolean,
|
|
23
28
|
default: false,
|
|
@@ -50,6 +55,7 @@
|
|
|
50
55
|
@com-font-weight-medium: var(--ui-font-weight-medium);
|
|
51
56
|
|
|
52
57
|
@com-color-header-text: var(--ui-color-header-text);
|
|
58
|
+
@com-color-gray-text: var(--ui-color-gray-text);
|
|
53
59
|
@com-color-red: var(--ui-color-red);
|
|
54
60
|
|
|
55
61
|
@com-text-big: var(--ui-text-big);
|
|
@@ -65,6 +71,12 @@
|
|
|
65
71
|
font-weight: @com-font-weight-medium;
|
|
66
72
|
font-size: @com-text-default;
|
|
67
73
|
color: @com-color-header-text;
|
|
74
|
+
|
|
75
|
+
.description {
|
|
76
|
+
display: block;
|
|
77
|
+
font-weight: normal;
|
|
78
|
+
color: @com-color-gray-text;
|
|
79
|
+
}
|
|
68
80
|
}
|
|
69
81
|
|
|
70
82
|
// Text size
|
|
@@ -80,7 +92,7 @@
|
|
|
80
92
|
&.tag-weight-400 > .component-ui-label--text { font-weight: 400; }
|
|
81
93
|
|
|
82
94
|
// Required
|
|
83
|
-
&.tag-required .component-ui-label--text
|
|
95
|
+
&.tag-required .component-ui-label--text .required {
|
|
84
96
|
color: @com-color-red;
|
|
85
97
|
font-weight: bold;
|
|
86
98
|
}
|