quasar-ui-danx 0.3.13 → 0.3.22
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/danx.es.js +5907 -5978
- package/dist/danx.es.js.map +1 -1
- package/dist/danx.umd.js +5 -5
- package/dist/danx.umd.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/ActionTable/ActionTable.vue +4 -24
- package/src/components/ActionTable/Filters/CollapsableFiltersSidebar.vue +2 -10
- package/src/components/ActionTable/Form/Fields/DateRangeField.vue +5 -3
- package/src/components/ActionTable/Form/Fields/FileUploadButton.vue +34 -33
- package/src/components/ActionTable/Layouts/ActionTableLayout.vue +1 -1
- package/src/components/ActionTable/TableSummaryRow.vue +4 -4
- package/src/components/ActionTable/listControls.ts +383 -378
- package/src/components/Utility/Layouts/CollapsableSidebar.vue +1 -1
- package/src/styles/quasar-reset.scss +19 -63
- package/src/styles/themes/danx/action-table.scss +0 -19
- package/src/styles/themes/danx/index.scss +0 -1
package/package.json
CHANGED
@@ -1,8 +1,5 @@
|
|
1
1
|
<template>
|
2
|
-
<div
|
3
|
-
class="dx-action-table overflow-hidden w-full"
|
4
|
-
:class="{'dx-no-data': !hasData}"
|
5
|
-
>
|
2
|
+
<div class="overflow-hidden w-full">
|
6
3
|
<ActionVnode />
|
7
4
|
<QTable
|
8
5
|
ref="actionTable"
|
@@ -15,10 +12,10 @@
|
|
15
12
|
selection="multiple"
|
16
13
|
:rows-per-page-options="rowsPerPageOptions"
|
17
14
|
class="sticky-column sticky-header w-full h-full !border-0"
|
18
|
-
|
15
|
+
color="blue-600"
|
19
16
|
@update:selected="$emit('update:selected-rows', $event)"
|
20
17
|
@update:pagination="() => {}"
|
21
|
-
@request="
|
18
|
+
@request="$emit('update:quasar-pagination', {...$event.pagination, __sort: mapSortBy($event.pagination, columns)})"
|
22
19
|
>
|
23
20
|
<template #no-data>
|
24
21
|
<slot name="empty">
|
@@ -27,7 +24,6 @@
|
|
27
24
|
</template>
|
28
25
|
<template #top-row>
|
29
26
|
<TableSummaryRow
|
30
|
-
v-if="hasData"
|
31
27
|
:label="label"
|
32
28
|
:item-count="summary?.count || 0"
|
33
29
|
:selected-count="selectedRows.length"
|
@@ -64,7 +60,7 @@
|
|
64
60
|
|
65
61
|
<script setup>
|
66
62
|
import { QTable } from "quasar";
|
67
|
-
import {
|
63
|
+
import { ref } from "vue";
|
68
64
|
import { getItem, setItem } from "../../helpers";
|
69
65
|
import { ActionVnode } from "../Utility";
|
70
66
|
import ActionTableColumn from "./ActionTableColumn.vue";
|
@@ -83,10 +79,6 @@ const props = defineProps({
|
|
83
79
|
type: String,
|
84
80
|
required: true
|
85
81
|
},
|
86
|
-
color: {
|
87
|
-
type: String,
|
88
|
-
default: "blue-600"
|
89
|
-
},
|
90
82
|
selectedRows: {
|
91
83
|
type: Array,
|
92
84
|
required: true
|
@@ -117,21 +109,9 @@ const props = defineProps({
|
|
117
109
|
const actionTable = ref(null);
|
118
110
|
registerStickyScrolling(actionTable);
|
119
111
|
|
120
|
-
const hasData = computed(() => props.pagedItems?.data?.length);
|
121
112
|
const COLUMN_SETTINGS_KEY = `column-settings-${props.name}`;
|
122
113
|
const columnSettings = ref(getItem(COLUMN_SETTINGS_KEY) || {});
|
123
114
|
function onUpdateColumnSettings() {
|
124
115
|
setItem(COLUMN_SETTINGS_KEY, columnSettings.value);
|
125
116
|
}
|
126
117
|
</script>
|
127
|
-
|
128
|
-
<style scoped lang="scss">
|
129
|
-
.dx-action-table {
|
130
|
-
&.dx-no-data {
|
131
|
-
:deep(.q-table__middle) {
|
132
|
-
flex-grow: 0;
|
133
|
-
flex-shrink: 1;
|
134
|
-
}
|
135
|
-
}
|
136
|
-
}
|
137
|
-
</style>
|
@@ -2,8 +2,8 @@
|
|
2
2
|
<CollapsableSidebar
|
3
3
|
:collapse="!showFilters"
|
4
4
|
disabled
|
5
|
-
|
6
|
-
|
5
|
+
min-width="0"
|
6
|
+
max-width="18rem"
|
7
7
|
:name="name"
|
8
8
|
@update:collapse="$emit('update:show-filters', !$event)"
|
9
9
|
>
|
@@ -29,14 +29,6 @@ defineProps({
|
|
29
29
|
type: Object,
|
30
30
|
default: null
|
31
31
|
},
|
32
|
-
minWidth: {
|
33
|
-
type: String,
|
34
|
-
default: "5rem"
|
35
|
-
},
|
36
|
-
maxWidth: {
|
37
|
-
type: String,
|
38
|
-
default: "18rem"
|
39
|
-
},
|
40
32
|
filterFields: {
|
41
33
|
type: Array,
|
42
34
|
default: () => []
|
@@ -1,7 +1,10 @@
|
|
1
1
|
<template>
|
2
2
|
<div>
|
3
|
-
<div
|
4
|
-
|
3
|
+
<div
|
4
|
+
v-if="label"
|
5
|
+
class="font-bold text-xs mb-2"
|
6
|
+
>
|
7
|
+
{{ label }}
|
5
8
|
</div>
|
6
9
|
<template v-if="inline">
|
7
10
|
<QDate
|
@@ -38,7 +41,6 @@
|
|
38
41
|
import { CalendarIcon as DateIcon } from "@heroicons/vue/outline";
|
39
42
|
import { computed, ref, watch } from "vue";
|
40
43
|
import { fDate, parseQDate, parseQDateTime } from "../../../../helpers";
|
41
|
-
import FieldLabel from "./FieldLabel";
|
42
44
|
|
43
45
|
const emit = defineEmits(["update:model-value"]);
|
44
46
|
const props = defineProps({
|
@@ -12,8 +12,8 @@
|
|
12
12
|
ref="fileUpload"
|
13
13
|
data-testid="file-upload"
|
14
14
|
type="file"
|
15
|
-
:accept="geolocation ? 'image/*;capture=camera' : undefined"
|
16
|
-
:capture="geolocation ? 'environment' : undefined"
|
15
|
+
:accept="(geolocation && cameraOnly) ? 'image/*;capture=camera' : undefined"
|
16
|
+
:capture="(geolocation && cameraOnly) ? 'environment' : undefined"
|
17
17
|
class="hidden"
|
18
18
|
multiple
|
19
19
|
@change="onAttachFiles"
|
@@ -28,28 +28,29 @@ import { FileUpload } from "../../../../helpers";
|
|
28
28
|
|
29
29
|
defineExpose({ upload });
|
30
30
|
const emit = defineEmits([
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
31
|
+
"uploading",
|
32
|
+
"file-progress",
|
33
|
+
"file-complete",
|
34
|
+
"complete"
|
35
35
|
]);
|
36
36
|
const props = defineProps({
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
37
|
+
...QBtn.props,
|
38
|
+
text: {
|
39
|
+
type: String,
|
40
|
+
default: "Add File"
|
41
|
+
},
|
42
|
+
locationWaitMessage: {
|
43
|
+
type: String,
|
44
|
+
default: "Waiting for location..."
|
45
|
+
},
|
46
|
+
cameraOnly: Boolean,
|
47
|
+
geolocation: Boolean
|
47
48
|
});
|
48
49
|
|
49
50
|
const fileUpload = ref(null);
|
50
51
|
|
51
52
|
function upload() {
|
52
|
-
|
53
|
+
fileUpload.value.click();
|
53
54
|
}
|
54
55
|
|
55
56
|
/**
|
@@ -59,23 +60,23 @@ function upload() {
|
|
59
60
|
* @returns {Promise<void>}
|
60
61
|
*/
|
61
62
|
async function onAttachFiles({ target: { files } }) {
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
63
|
+
emit("uploading", files);
|
64
|
+
let fileUpload = new FileUpload(files)
|
65
|
+
.onProgress(({ file, progress }) => {
|
66
|
+
file.progress = progress;
|
67
|
+
emit("file-progress", file);
|
68
|
+
})
|
69
|
+
.onComplete(({ file, uploadedFile }) => {
|
70
|
+
emit("file-complete", { file, uploadedFile });
|
71
|
+
})
|
72
|
+
.onAllComplete(() => {
|
73
|
+
emit("complete", fileUpload.files);
|
74
|
+
});
|
74
75
|
|
75
|
-
|
76
|
-
|
77
|
-
|
76
|
+
if (props.geolocation) {
|
77
|
+
await fileUpload.resolveLocation(props.locationWaitMessage);
|
78
|
+
}
|
78
79
|
|
79
|
-
|
80
|
+
fileUpload.upload();
|
80
81
|
}
|
81
82
|
</script>
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<template>
|
2
|
-
<div class="flex flex-grow flex-col flex-nowrap overflow-hidden h-full">
|
2
|
+
<div class="flex flex-grow flex-col flex-nowrap overflow-hidden h-full bg-white">
|
3
3
|
<slot name="top" />
|
4
4
|
<slot name="toolbar" />
|
5
5
|
<div class="flex flex-nowrap flex-grow overflow-hidden w-full">
|
@@ -1,12 +1,12 @@
|
|
1
1
|
<template>
|
2
2
|
<QTr
|
3
|
-
class="
|
4
|
-
:class="{'
|
3
|
+
class="sticky-column-1 transition-all sticky-row"
|
4
|
+
:class="{'!bg-gray-100': !selectedCount, '!bg-blue-600 text-white selected': selectedCount, 'opacity-50': loading}"
|
5
5
|
>
|
6
6
|
<QTd
|
7
7
|
:colspan="stickyColspan"
|
8
|
-
class="
|
9
|
-
:class="{'
|
8
|
+
class="font-bold transition-all"
|
9
|
+
:class="{'!bg-gray-100 !pl-5': !selectedCount, '!bg-blue-600 text-white !pl-4': selectedCount}"
|
10
10
|
>
|
11
11
|
<div class="flex flex-nowrap items-center">
|
12
12
|
<div
|